<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>Flow-UI - Documentation</title>
    <meta content="Flow-UI文档,Flow-CLI,front-flow" name="Keywords">
    <meta content="Flow-UI 是一套组件化UI框架，支持定制主题，主要服务于前台及中后台产品。" name="Description">
    <meta property="og:type" content="document"/>
<meta property="og:release_date" content="2016-06-20"/>
<meta property="og:title" content="Flow-UI Documentation"/>
<meta property="og:description" content="Flow-UI 是一套组件化UI框架，支持定制主题，主要服务于前台及中后台产品。"/>
<meta property="og:document:type" content="html"/>
<meta property="og:image" content="https://github.com/tower1229/tower1229.github.io/raw/master/asset/ico108.png"/>
<meta property="og:document:page" content="1"/>
<meta property="og:document:cost" content="免费"/>
<link href="/Flow-UI/docs/favicon.ico" rel="icon">
<link href="/Flow-UI/docs/css/style.css" rel="stylesheet">
<script type="text/javascript">
	if(window.location.href.indexOf('https')===0){
		document.write('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />');
	}
</script>
<!--[if lt IE 9]><script src="/Flow-UI/docs/lib/H5shiv.js"></script><![endif]-->
<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?f10103677155b485824f29def715eb5d";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
</head>

<body class="hasNav scrollbar">
    <header class="wrap"><h1>Flow-UI - Documentation</h1></header>
    <nav class="wrap nav scrollbar" id="nav">导航生成中...</nav>
    <section class="wrap" id="overall">
        <h2>概述</h2>
        <h3 id="overall-intro">关于</h3>
        <p> <strong class="text-primary">Flow-UI</strong> 是一套组件化UI框架，支持定制主题，主要服务于前台及中后台产品。</p>
        <h4>兼容性</h4>
        <p>IE8+</p>
        <h4>示例项目</h4>
        <p> <a href="demo.html" target="_blank"><i class="ion">&#xe60e;</i> Flow-UI 概览 </a> </p>
        <p> <a href="/Flow-UI/dashboard/index.html" target="_blank"><i class="ion">&#xe620;</i> Flow-UI 控制台 </a> </p>
        <h4 id="download">下载</h4>
        <p>Github：<a href="https://github.com/tower1229/Flow-UI" target="_blank">Flow-UI</a></p>
        <p>OsChina: <a href="http://git.oschina.net/genvision/Flow-UI" target="_blank">Flow-UI</a></p>
        <h4>目录结构</h4>
        <pre>
            <code class="javascript"> 
  |-- flow-ui/                  //模板项目
  |    |-- css/                     //css文件
  |    |-- font/                    //字体文件
  |    |-- img/                     //图片文件
  |    |-- js/                      //js文件
  |    |-- lib/                     //模块库以外的js文件
  |    |-- index.html               //索引页
  |    |-- seajs.config.js          //配置文件
  |    `-- favicon.ico              //网页图标
  |-- public/                   //项目公共文件
  ·-- modules/                  //本地模块库(可选)
                </code>
          </pre>
        <h3 id="get-start">快速开始</h3>
        <p>1. 拷贝<code>flow-ui/</code>和<code>modules/</code>到项目中；</p>
        <p>2. 根据需要修改配置，<code>seajs.config.js</code>包含框架所需的所有配置；</p>
        <p>3. 启动本地服务，访问 <a href="http://localhost/flow-ui/index.html" target="_blank">http://localhost/flow-ui/index.html</a></p>
        
        <h4>项目配置</h4>
        <table class="table">
            <tr>
                <td>
                    seajs.root
                </td>
                <td>
                    [string] 模块化js加载起始路径，通常为<code>""</code>，例如页面在站点二级目录，需设置此项为目录名称。
                </td>
            </tr>
            <tr>
                <td>
                    seajs.set
                </td>
                <td>
                    [object] 模块设置或自定义功能设置，例如<code>seajs.set = {
    base: {
        timeout: 1.5e4
    }
};</code>
                </td>
            </tr>
            <tr>
                <td>
                    seajs.config.base
                </td>
                <td>
                    [string] 模块化文件存放路径，默认<code>seajs.root + "/modules"</code>，也可以配置其他位置或远程位置。
                </td>
            </tr>
            <tr>
                <td>
                    seajs.config.paths
                </td>
                <td>
                    [object] 路径短语，默认配置了<code>js</code>文件夹和<code>lib</code>文件夹。
                </td>
            </tr>
            <tr>
                <td>
                    seajs.config.alias
                </td>
                <td>
                    [object] 模块短命名。
                </td>
            </tr>
            <tr>
                <td>
                    seajs.localcache.timeout
                </td>
                <td>
                    [number] 本地缓存方案加载超时时间，单位ms，默认<code>2e4</code>
                </td>
            </tr>
        </table>
        <h4>自动化工具</h4>
        <p>基于nodejs的前端自动化工具<a href="https://github.com/tower1229/Flow-CLI" target="_blank">Flow-CLI</a></p>
    </section>
    <section class="wrap" id="css">
        <h2>CSS</h2>
        <h3 id="css-compile">定制主题</h3>
        <p>Flow-UI基于<code>less</code>实现UI组件化，从全站样式中抽离出配置文件，可实现灵活的风格控制和组件选配，要充分发挥Flow-UI的定制性，需要搭配自动化编译工具 <a href="https://github.com/front-flow/Flow-CLI" target="_blank">Flow-CLI</a>使用，示例主题配置如下：</p>
        <pre>
            <code>
//文字
@font-size:         14px;
@font-size-lg:      16px;
@font-size-sm:      12px;
@line-height:       1.7;
@font-family:       Arial, 'Hiragino Sans GB', 'WenQuanYi Micro Hei', '\5fae\8f6f\96c5\9ed1', 'SimSun', sans-serif;

//基础色
@black:             #000;
@light:             #fff;

@gray-darker:       lighten(@black, 13.5%); // #222
@gray-dark:         lighten(@black, 20%);   // #333
@gray:              lighten(@black, 33.5%); // #555
@gray-light:        lighten(@black, 60%);   // #999
@gray-lighter:      lighten(@black, 93.5%); // #eee

@text-color:        @gray;
@link-color:        inherit;
@link-color-hover:  @primary;
@selected:          #39f;
@placeholder:       #aaa;
@border:            #e8e9eb;

//情景色
@primary:           #1d6fb8;
@primary-dark:      darken(@primary, 20%);
@auxiliary:         #ff6e0a;
@auxiliary-dark:    darken(@auxiliary, 20%);
@info:              #4fcbf0;
@info-dark:         darken(@info, 20%);
@success:           #25ae88;
@success-dark:      darken(@success, 20%);
@warning:           #fec14c;
@warning-dark:      darken(@warning, 20%);
@danger:            #fd7b6d;
@danger-dark:       darken(@danger, 20%);

//间距
@space:             1.6 * @font-size;
@space-sm:          1 * @font-size;
@space-lg:          2.4 * @font-size;

//版式
@view-width:        1200px;
@radius:            4px;

//响应节点
@Pc:                1024px;
@Pad:               640px;

//grid.less
@gridColumns:       12;
@gridGutter:        2%;
//form.less
@form-base-height: round(@font-size * 2.3);
@form-sm-height: round(@font-size-sm * 2.1);
@form-lg-height: round(@font-size-lg * 2.5);
@form-base-space: round(@line-height / 3 * @font-size);
@form-lg-space: round(@line-height / 2.5 * @font-size);
//iconsprite.less
 @sprite-matrix:    5;
 @sprite-width:     25px;
//btn.less
@btn-base-height: @form-base-height;
@btn-sm-height: @form-sm-height;
@btn-lg-height: @form-lg-height;
//dl.less
@dl-label-width:    10em;
//table.less
@table-head-height: 40px;
            </code>
        </pre>
        <p>点此进一步了解自动化工具<a href="https://github.com/front-flow/Flow-CLI" target="_blank">Flow-CLI</a>。</p>
        <h3 id="css-component">组件列表</h3>
        <nav class="modules_index" id="component_index"></nav>
        <p>部分样式组件仅供插件调用，如<code>tree.less</code>，将不在此罗列。</p>
        <dl class="dl modules_list" id="component_list">
                <dt id="badge(徽标)">badge.less</dt>
                <dd>
                    <div class="playground">
                        <span class="m"><span class="badge"><a href="#" class="btn btn-default">button</a> <sup class="badge-count">99+</sup></span></span>
                        <span class="m"><span class="badge"><a href="#" class="btn btn-default">button</a> <sup class="badge-dot"></sup></span></span>
                        <span class="m"><span class="badge"><sup class="badge-count badge-count-alone">99</sup></span></span>
                        <span class="m"><span class="badge badge-primary"><sup class="badge-count badge-count-alone">99</sup></span></span>
                        <span class="m"><span class="badge badge-auxiliary"><sup class="badge-count badge-count-alone">99</sup></span></span>
                        <span class="m"><span class="badge badge-info"><sup class="badge-count badge-count-alone">99</sup></span></span>
                        <span class="m"><span class="badge badge-success"><sup class="badge-count badge-count-alone">99</sup></span></span>
                        <span class="m"><span class="badge badge-warning"><sup class="badge-count badge-count-alone">99</sup></span></span>
                    </div>
                    <table class="table">
                        <tr>
                            <td>.badge</td>
                            <td>
                                定义一个徽标容器
                            </td>
                        </tr>
                        <tr>
                            <td>.badge-count</td>
                            <td>
                                定义徽标数字元素
                            </td>
                        </tr>
                        <tr>
                            <td>.badge-dot</td>
                            <td>
                                定义徽标圆点
                            </td>
                        </tr>
                        <tr>
                            <td>.badge-count-alone</td>
                            <td>
                                叠加在.badge-count上将徽标显示为独立徽标
                            </td>
                        </tr>
                        <tr>
                            <td>.badge-primary</td>
                            <td>
                                叠加在.badge上以显示为主色调(另："auxiliary", success", "info", "warning", "danger")
                            </td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="bread(面包屑)">bread.less</dt>
                <dd>
                    <div class="playground">
                        <div class="bread m-tb">
                            <a href="###" class="bread-link">Home</a>
                            <span class="bread-sep">/</span>
                            <a href="###" class="bread-link">Components</a>
                            <span class="bread-sep">/</span>
                            <span class="bread-link">Breadcrumb</span>
                        </div>
                        <div class="bread m-tb">
                            <a href="###" class="bread-link"> <i class="ion">&#xe64a;</i> Home</a>
                            <span class="bread-sep">/</span>
                            <a href="###" class="bread-link"> <i class="ion">&#xe6bb;</i> Components</a>
                            <span class="bread-sep">/</span>
                            <span class="bread-link"> <i class="ion">&#xe64e;</i>Breadcrumb</span>
                        </div>
                    </div>
                    <table class="table">
                        <tr>
                            <td>.bread</td>
                            <td>
                                定义一个面包屑容器
                            </td>
                        </tr>
                        <tr>
                            <td>span.bread-sep</td>
                            <td>
                                定义面包屑间隔
                            </td>
                        </tr>
                        <tr>
                            <td>span.bread-link</td>
                            <td>
                                定义面包屑当前位置
                            </td>
                        </tr>
                        <tr>
                            <td>a.bread-link</td>
                            <td>
                                定义面包屑链接
                            </td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="button(按钮)">btn.less</dt>
                <dd>
                    <div class="playground">
                        <div class="m-tb">
                            <button type="button" class="btn btn-default">default</button>
                            <button type="button" class="btn btn-primary">primary</button>
                            <button type="button" class="btn btn-info">info</button>
                            <button type="button" class="btn btn-success">success</button>
                            <button type="button" class="btn btn-warning">warning</button>
                            <button type="button" class="btn btn-danger">danger</button>
                        </div>
                        <div class="m-b">
                            <a href="#" class="btn btn-ghost btn-default">default</a>
                            <a href="#" class="btn btn-ghost btn-primary">primary</a>
                            <a href="#" class="btn btn-ghost btn-info">info</a>
                            <a href="#" class="btn btn-ghost btn-success">success</a>
                            <a href="#" class="btn btn-ghost btn-warning">warning</a>
                            <a href="#" class="btn btn-ghost btn-danger">danger</a>
                        </div>
                        <div class="m-b">
                            <button type="button" class="btn btn-lg btn-primary">Large</button>
                            <a href="#" class="btn btn-sm btn-primary">Small</a>
                            <a href="###" class="btn btn-link">链接按钮</a>
                        </div>
                    </div>
                    
                    <table class="table">
                        <tr>
                            <td>.btn</td>
                            <td>
                                定义一个按钮
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-default</td>
                            <td>
                                普通颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-primary</td>
                            <td>
                                主色调颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-auxiliary</td>
                            <td>
                                辅色调颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-info</td>
                            <td>
                                中性情景颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-success</td>
                            <td>
                                成功情景颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-warning</td>
                            <td>
                                警告情景颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-danger</td>
                            <td>
                                危险情景颜色
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-sm</td>
                            <td>
                                叠加更改为较小尺寸按钮
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-lg</td>
                            <td>
                                叠加更改为较大尺寸按钮
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-ghost</td>
                            <td>
                                叠加更改为幽灵按钮
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-block</td>
                            <td>
                                叠加更改为块级按钮
                            </td>
                        </tr>
                        <tr>
                            <td>.btn-link</td>
                            <td>
                                叠加更改为链接按钮
                            </td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="card(卡片)">card.less</dt>
                <dd>
                    <div class="playground">
                        <div class="row m-tb">
                            <div class="span-6 m-b">
                                <div class="card">
                                    <div class="card-head">
                                        <div class="card-title">无边框卡片</div>
                                    </div>
                                    <div class="card-extra">
                                        <a href="###" class="btn btn-link">More+</a>
                                    </div>
                                    <div class="card-body">
                                        mycard
                                    </div>
                                </div>
                            </div>
                            <div class="span-6 m-b">
                                <div class="card card-shadow">
                                    <div class="card-head">
                                        <div class="card-title">带阴影卡片</div>
                                    </div>
                                    <div class="card-extra">
                                        <a href="###" class="btn btn-link">More+</a>
                                    </div>
                                    <div class="card-body">
                                        hahaha
                                    </div>
                                </div>
                            </div>
                            <div class="span-6 m-b">
                                <div class="card card-bordered">
                                    <div class="card-head">
                                        <div class="card-title">带边框卡片</div>
                                    </div>
                                    <div class="card-extra">
                                        <a href="###" class="btn btn-link">More+</a>
                                    </div>
                                    <div class="card-body">
                                        mycard3
                                    </div>
                                </div>
                            </div>
                            <div class="span-6 m-b">
                                <div class="card card-bordered">
                                    <div class="card-head">
                                        <div class="card-title">带底部卡片</div>
                                    </div>
                                    <div class="card-body">
                                        mycard4
                                    </div>
                                    <div class="card-foot">
                                        $11.234,00
                                        <div class="r">
                                            <span class="text-danger"><i class="ion">&#xe618;</i></span>
                                            15%
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table class="table">
                        <tr>
                            <td>.card</td>
                            <td>
                                定义一个卡片
                            </td>
                        </tr>
                        <tr>
                            <td>.card-shadow</td>
                            <td>
                                叠加阴影效果
                            </td>
                        </tr>
                        <tr>
                            <td>.card-bordered</td>
                            <td>
                                叠加边框线
                            </td>
                        </tr>
                        <tr>
                            <td>.card-head</td>
                            <td>
                                定义卡片头部
                            </td>
                        </tr>
                        <tr>
                            <td>.card-title</td>
                            <td>
                                在头部内定义卡片标题
                            </td>
                        </tr>
                        <tr>
                            <td>.card-extra</td>
                            <td>
                                在头部内定义附加物
                            </td>
                        </tr>
                        <tr>
                            <td>.card-body</td>
                            <td>
                                内定卡片内容
                            </td>
                        </tr>
                        <tr>
                            <td>.card-foot</td>
                            <td>
                                定义卡片底部
                            </td>
                        </tr>
                        <tr>
                            <td>.card-primary</td>
                            <td>
                                叠加在容器上使开关显示为主色调(另："auxiliary", success", "info", "warning", "danger")
                            </td>
                        </tr>
                        <tr>
                            <td>.card-inverse</td>
                            <td>
                                反转颜色卡片(card-body将带有背景色)
                            </td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="color(色彩)">color.less</dt>
                <dd>
                    <p></p>
                    <table class="table">
                        <tr>
                            <td>.text-muted</td>
                            <td>
                                <p class="text-muted">次要内容</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-black</td>
                            <td>
                                <p class="text-black">黑色文本</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-light</td>
                            <td>
                                <p class="bg-black text-light">白色文本</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-primary</td>
                            <td>
                                <p class="text-primary">主色调文字</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-auxiliary</td>
                            <td>
                                <p class="text-auxiliary">辅助色文字</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-success</td>
                            <td>
                                <p class="text-success">成功情景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-info</td>
                            <td>
                                <p class="text-info">中性情景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-warning</td>
                            <td>
                                <p class="text-warning">警告情景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.text-danger</td>
                            <td>
                                <p class="text-danger">危险情景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-muted</td>
                            <td>
                                <p class="bg-muted">次要背景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-black</td>
                            <td>
                                <p class="bg-black">黑色背景</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-light</td>
                            <td>
                                <p class="bg-light">白色背景</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-gray-light</td>
                            <td>
                                <p class="bg-gray-light">浅灰色背景</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-gray-lighter</td>
                            <td>
                                <p class="bg-gray-lighter">更浅灰色背景</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-primary</td>
                            <td>
                                <p class="bg-primary">主色调背景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-auxiliary</td>
                            <td>
                                <p class="bg-auxiliary">辅助色背景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-success</td>
                            <td>
                                <p class="bg-success">成功情景背景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-warning</td>
                            <td>
                                <p class="bg-warning">警告情景背景色</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.bg-danger</td>
                            <td>
                                <p class="bg-danger">危险情景背景色</p>
                            </td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="dl(定义列表)">dl.less</dt>
                <dd>
                    <div class="playground">
                        <dl class="dl dl-table">
                            <dt>民国七年</dt>
                            <dd>以鲁迅为笔名发表中国现代文学史上第一篇用现代体式创作的白话短篇小说《狂人日记》，载在《新青年》第四卷第五号。</dd>
                            <dt>民国九年</dt>
                            <dd>在北京大学，北京高等师范学校讲授中国小说史，6月，读《共产党宣言》中文译本盛赞译者。9月，发表小说《风波》。</dd>
                            <dt>民国十二年</dt>
                            <dd>8月，小说集《呐喊》出版；与弟弟周作人分居，迁至西四塔胡同61号居住，分居原因不明。12月，作《娜拉走后怎样》演讲，兼任女师大，世界语学校教师；《中国小说史略》上册出版。</dd>
                            <dt>民国十三年</dt>
                            <dd>7月，赴西安讲《中国小说的历史变迁》。8月返京。11月，《语丝》周刊出版，鲁迅在首期发表《论雷峰塔的倒掉》，自此鲁迅成为《语丝》作家群的主将之一。</dd>
                            <dt>光绪二十三年</dt>
                            <dd>家族开会分房，分给鲁迅他们的既差且小，鲁迅拒绝签字遭到叔辈们斥责，倍感世态炎凉。</dd>
                        </dl>
                    </div>
                    
                    <table class="table">
                        <tr>
                            <td>.dl</td>
                            <td>
                                美化  <code>dl</code>元素
                            </td>
                        </tr>
                        <tr>
                            <td>.dl-table</td>
                            <td>
                                与.dl叠加提供左侧对齐样式
                            </td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="flex(flex栅格)">flex.less</dt>
                <dd>
                    <p>移动端和高级浏览器可用的flex栅格，沿用流式栅格系统的命名风格，解决flex三代规范演变带来的兼容问题。</p>
                    <table class="table">
                        <tr>
                            <td>.flex-col</td>
                            <td>定义一个纵向flex容器。</td>
                        </tr>
                        <tr>
                            <td>.flex-row</td>
                            <td>定义一个横向flex容器。</td>
                        </tr>
                        <tr>
                            <td>.flex-1，
                                <br/>.flex-2，
                                <br/>.flex-3，
                                <br/>.flex-4</td>
                            <td>定义flex盒子的主轴尺寸占比。
                                <br/>即，在纵向容器中控制高度，在横向容器中控制宽度。</td>
                        </tr>
                        <tr>
                            <td>.align-stretch</td>
                            <td>flex盒子在侧轴方向伸展。</td>
                        </tr>
                        <tr>
                            <td>.align-center</td>
                            <td>flex盒子在侧轴方向居中对齐。</td>
                        </tr>
                        <tr>
                            <td>.justify-center</td>
                            <td>flex盒子在主轴方向居中对齐。</td>
                        </tr>
                        <tr>
                            <td>.flex-wrap</td>
                            <td>允许flex盒子换行显示，默认不换行。</td>
                        </tr>
                        <tr>
                            <td>.scroll_cont</td>
                            <td>带滚动条区域</td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="form(表单)">form.less</dt>
                <dd>
                    <div class="playground">
                        <div class="row">
                            <div class="span-6 smal-12">
                                <h5>基本实例</h5>
                                <form class="form m-b">
                                    <div class="form-group">
                                        <label class="control-label" for="exampleInputEmail1">邮箱：</label>
                                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="exampleInputPassword1">密码：</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                    </div>
                                    <label class="checkbox">
                                        <input type="checkbox">Check me out
                                    </label>
                                    <button type="button" class="btn btn-primary">Submit</button>
                                </form>
                            </div>
                            <div class="span-6 smal-12">
                                <h5>配合栅格</h5>
                                <form class="form m-b">
                                    <div class="form-group row">
                                        <label for="inputEmail3" class="span-2 control-label">Email</label>
                                        <div class="span-10">
                                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="inputPassword3" class="span-2 control-label">Password</label>
                                        <div class="span-10">
                                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="pull-right-2 span-10">
                                            <label class="checkbox">
                                                <input type="checkbox"> Remember me
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <div class="pull-right-2 span-10">
                                            <div class="help-block">Example block-level help text here.</div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="pull-right-2 span-10">
                                            <button type="button" class="btn btn-primary">Sign in</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="row m-tb">
                            <div class="span-6 smal-12">
                                <h5>单选和多选</h5>
                                <label class="checkbox">
                                    <input type="checkbox" value=""> Option one is this and that&mdash;be sure to include why it's great
                                </label>
                                <label class="checkbox disabled">
                                    <input type="checkbox" value="" disabled> Option two is disabled
                                </label>
                                <label class="radio">
                                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that&mdash;be sure to include why it's great
                                </label>
                                <label class="radio">
                                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one
                                </label>
                                <label class="radio disabled">
                                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled
                                </label>
                            </div>
                            <div class="span-6 smal-12">
                                <h5>内联单选和多选</h5>
                                <div class="m-b">
                                    <label class="checkbox checkbox-inline">
                                        <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
                                    </label>
                                    <label class="checkbox checkbox-inline">
                                        <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
                                    </label>
                                    <label class="checkbox checkbox-inline">
                                        <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
                                    </label>
                                </div>
                                <div class="m-b">
                                    <label class="radio radio-inline">
                                        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                                    </label>
                                    <label class="radio radio-inline">
                                        <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
                                    </label>
                                    <label class="radio radio-inline">
                                        <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row m-tb">
                            <div class="span-12">
                                <h5>内联表单</h5>
                                <form class="form-inline m-b">
                                    <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
                                    <div class="input-group">
                                        <div class="input-group-addon">@</div>
                                        <input class="form-control" type="email" placeholder="Enter email">
                                    </div>
                                    <label class="sr-only" for="exampleInputPassword2">Password</label>
                                    <input type="password" class="form-control" id="exampleInputPassword2
                        " placeholder="Password">
                                    <button type="button" class="btn btn-primary">Sign in</button>
                                </form>
                            </div>
                        </div>
                        <div class="row m-tb">
                            <div class="span-6 smal-12">
                                <h5>特殊样式</h5>
                                <form class="form">
                                    <div class="form-group row has-feedback">
                                        <label class="control-label span-3">带图标</label>
                                        <div class="span-9 has-primary">
                                            <input type="text" class="form-control"> <i class="ion form-control-feedback">&#xe60d;</i>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="control-label span-3">必填标记<big class="form-mark">*</big></label>
                                        <div class="span-9 ">
                                            <input type="text" class="form-control" placeholder="必填">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="control-label span-3">填空</label>
                                        <div class="span-9">
                                            <input type="text" class="form-control form-control-blank" placeholder="请填写"> 
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="control-label span-3" for="inputGroupSuccess2">带徽标</label>
                                        <div class="span-9">
                                            <div class="input-group">
                                                <span class="input-group-addon">@</span>
                                                <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
                                            </div>
                                        </div>
                                    </div>
                                    
                                </form>
                            </div>
                            <div class="span-6 smal-12">
                                <h5>按钮组</h5>
                                <div class="m-tb">
                                    <div class="input-group-btn">
                                        <div class="btn btn-default">btn1</div>
                                        <div class="btn btn-default">btn2</div>
                                        <div class="btn btn-default">btn3</div>
                                        <div class="btn btn-default">btn4</div>
                                    </div>
                                </div>
                                <div class="m-tb">
                                    <div class="input-group-btn">
                                        <div class="btn btn-primary">primary</div>
                                        <div class="btn btn-success">success</div>
                                        <div class="btn btn-warning">warning</div>
                                        <div class="btn btn-danger">danger</div>
                                    </div>
                                </div>
                                <div class="m-tb">
                                    <div class="input-group">
                                        <div class="input-group-addon "><i class="ion">&#xe7da;</i></div>
                                        <input class="form-control" type="email" placeholder="What are you looking for?">
                                        <div class="input-group-addon noborder">
                                            <button class="btn btn-primary">搜素</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <table class="table">
                        <tr>
                            <td>.form</td>
                            <td>
                                <p>定义表单元素</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-inline</td>
                            <td>
                                <p>定义一个内联表单</p>
                            </td>
                        </tr>
                        
                        <tr>
                            <td>.form-group</td>
                            <td>
                                <p>在表单内定义一行，可以配合栅格系统使用</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-group-sm</td>
                            <td>
                                <p>叠加定义一个较小尺寸的行，内部元素自动缩小</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-group-lg</td>
                            <td>
                                <p>叠加定义一个较大尺寸的行，内部元素自动放大</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.input-group</td>
                            <td>
                                <p>定义一个带徽标的输入框组合</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.input-group-sm</td>
                            <td>
                                <p>叠加input-group定义一个较小尺寸的输入框组合</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.input-group-lg</td>
                            <td>
                                <p>叠加input-group定义一个较大尺寸的输入框组合</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.input-group-addon</td>
                            <td>
                                <p>在输入框组合内定义一个徽标</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.noborder</td>
                            <td>
                                叠加input-group-addon使徽标无边框
                            </td>
                        </tr>
                        <tr>
                            <td>.form-control</td>
                            <td>
                                <p>定义<code>input/textarea</code>控件样式</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-control-blank</td>
                            <td>
                                <p>叠加<code>form-control</code>元素，使成为填空样式</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.radio</td>
                            <td>
                                <p>定义一个radio元素组合</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.radio-inline</td>
                            <td>
                                <p>叠加更改radio组合为内联样式</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.checkbox</td>
                            <td>
                                <p>定义一个checkbox元素组合</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.checkbox-inline</td>
                            <td>
                                <p>叠加更改checkbox组合为内联样式</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.help-block</td>
                            <td>
                                <p>定义一条帮助信息</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-control-static</td>
                            <td>
                                <p>定义一个与form-control元素登高的行</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.control-label</td>
                            <td>
                                <p>定义一个与form-control元素对齐的提示元素</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.input-sm</td>
                            <td>
                                <p>叠加更改为较小尺寸</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.input-lg</td>
                            <td>
                                <p>叠加更改为较大尺寸</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.form-mark</td>
                            <td>
                                <p>定义一个醒目标记元素</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.disabled</td>
                            <td>
                                <p>叠加到空间使不可用</p>
                            </td>
                        </tr>
                        <tr>
                            <td>.input-group-btn</td>
                            <td>
                                <p>定义一个按钮组</p>
                            </td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="grid(栅格系统)">grid.less</td>
                <dd>
                    <div class="playground">
                        <div class="row m-tb">
                            <div class="span-2">
                                <div class="p bg-info">.span-2</div>
                            </div>
                            <div class="span-2">
                                <div class="p bg-info">.span-2</div>
                            </div>
                            <div class="span-2">
                                <div class="p bg-info">.span-2</div>
                            </div>
                            <div class="span-2">
                                <div class="p bg-info">.span-2</div>
                            </div>
                            <div class="span-2">
                                <div class="p bg-info">.span-2</div>
                            </div>
                            <div class="span-2">
                                <div class="p bg-info">.span-2</div>
                            </div>
                        </div>
                        <div class="row m-b">
                            <div class="span-4">
                                <div class="p bg-info">.span-4</div>
                            </div>
                            <div class="span-4">
                                <div class="p bg-info">.span-4</div>
                            </div>
                            <div class="span-4">
                                <div class="p bg-info">.span-4</div>
                            </div>
                        </div>
                        <div class="full-row m-b">
                            <div class="span-8">
                                <div class="p bg-primary">.full-row .span-8</div>
                            </div>
                            <div class="span-4">
                                <div class="p bg-success">.full-row .span-4</div>
                            </div>
                        </div>
                        <div class="full-row m-b">
                            <div class="span-6">
                                <div class="p bg-primary">.full-row .span-6</div>
                            </div>
                            <div class="span-6">
                                <div class="p bg-success">.full-row .span-6</div>
                            </div>
                        </div>
                    </div>
                    <h5>基础栅格</h5>
                    <pre>
    <code>
       &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;span-4&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;span-8&quot;&gt;&lt;/div&gt;
       &lt;/div&gt;
    </code>
</pre>
                    <h5>响应式栅格</h5>
                    <pre>
    <code>
       &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;span-4 midd-8 smal-16&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;span-8 midd-8 smal-16&quot;&gt;&lt;/div&gt;
       &lt;/div&gt;
    </code>
</pre>
                    <h5>无间距模式</h5>
                    <pre>
    <code>
       &lt;div class=&quot;full-row&quot;&gt;
          &lt;div class=&quot;span-4 midd-8 smal-16&quot;&gt;无间距模式&lt;/div&gt;
          &lt;div class=&quot;span-8 midd-8 smal-16&quot; style="background:grey;color:#fff;"&gt;无间距模式&lt;/div&gt;
       &lt;/div&gt;
    </code>
</pre>
                    <h5>栅格辅助工具</h5>
                    <table class="table">
                        <tr>
                            <td>.center</td>
                            <td>居中,居中的栅格将成为块级元素占据整行，不能多列栅格共存</td>
                        </tr>
                        <tr>
                            <td>.midd-center</td>
                            <td>中屏居中</td>
                        </tr>
                        <tr>
                            <td>.smal-center</td>
                            <td>小屏居中</td>
                        </tr>
                        <tr>
                            <td>.hide</td>
                            <td>大屏隐藏</td>
                        </tr>
                        <tr>
                            <td>.midd-hide</td>
                            <td>中屏隐藏</td>
                        </tr>
                        <tr>
                            <td>.smal-hide</td>
                            <td>小屏隐藏</td>
                        </tr>
                        <tr>
                            <td>.smal-show</td>
                            <td>小屏显示，用于显示中屏隐藏的元素</td>
                        </tr>
                        <tr>
                            <td>.pull-right</td>
                            <td>置右，置右和位移工具的设计使用场景是，在非小屏下调整DOM顺序，以在小屏下全宽显示时有正确的前后(上下)关系</td>
                        </tr>
                        <tr>
                            <td>.pull-left-1</td>
                            <td> 左位移1格， <strong>注：位移在小屏下会自动清除</strong> </td>
                        </tr>
                        <tr>
                            <td>.pull-left-2</td>
                            <td> 左位移2格， <strong>注：位移在小屏下会自动清除</strong> </td>
                        </tr>
                        <tr>
                            <td>.pull-left-3</td>
                            <td> 左位移3格， <strong>注：位移在小屏下会自动清除</strong> </td>
                        </tr>
                        <tr>
                            <td>...</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>.pull-right-1</td>
                            <td> 右位移1格， <strong>注：位移在小屏下会自动清除</strong> </td>
                        </tr>
                        <tr>
                            <td>.pull-right-2</td>
                            <td> 右位移2格， <strong>注：位移在小屏下会自动清除</strong> </td>
                        </tr>
                        <tr>
                            <td>.pull-right-3</td>
                            <td> 右位移3格， <strong>注：位移在小屏下会自动清除</strong> </td>
                        </tr>
                        <tr>
                            <td>...</td>
                            <td></td>
                        </tr>
                    </table>
                    <h5>栅格嵌套</h5>
                    <p>嵌套栅格也需要带<code>.row</code>或<code>.full-row</code>层，支持无限嵌套。</p>
                    <pre>
 <code>
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;span-4&quot;&gt;
          side
        &lt;/div&gt;
        &lt;div class=&quot;span-8&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;span-9&quot;&gt;
              main
            &lt;/div&gt;
            &lt;div class=&quot;span-3&quot;&gt;
              sub
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
 </code>
</pre>
                </dd>
                <dt id="iconfont(字体图标)">iconfont.less</dt>
                <dd>
                    <p>字体图标，为Flow-UI创建的<a href="http://refined-x.com/Flow-ICON/dist/" target="_blank">图标库</a>项目，提供框架内置图标的检索、获取Unicode、PNG定制下载功能。</p>
                    <p>详情访问<a href="https://github.com/tower1229/Flow-ICON" target="_blank" class="btn btn-link">Flow-ICON</a>项目主页。</p>
                    <pre>
  <code>
    <i class="ion">&#xe63b;</i>:&lt;i class=&quot;ion&quot;&gt;&amp;#xe63b;&lt;/i&gt;
    <i class="ion">&#xe64e;</i>:&lt;i class=&quot;ion&quot;&gt;&amp;#xe64e;&lt;/i&gt;
    <i class="ion">&#xe660;</i>:&lt;i class=&quot;ion&quot;&gt;&amp;#xe660;&lt;/i&gt;
  </code>
</pre>
                </dd>
                <dt id="iconsprite(精灵图标)">iconsprite.less</dt>
                <dd>
                    <p>精灵图，<code>.ico</code>定义一个25px正方形精灵图标，默认支持5x5矩阵，如：</p>
                    <pre>
                        <code>
    &lt;i class=&quot;ico ico1_1&quot;&gt;&lt;/i&gt;
    &lt;i class=&quot;ico ico1_2&quot;&gt;&lt;/i&gt;
                        </code>
                    </pre>
                </dd>
                <dt id="item(列表)">item.less</dt>
                <dd>
                    <div class="playground">
                        <div class="row">
                            <div class="span-4">
                                <ul class="items items-primary">
                                    <li class="item active">
                                        <a href="###"><i class="ion">&#xe640;</i> Analytics Redesign </a>
                                    </li>
                                    <li class="item">
                                        <a href="###"><i class="ion">&#xe695;</i> Analytics Redesign </a>
                                    </li>
                                    <li class="item">
                                        <a href="###"><i class="ion">&#xe6a8;</i> Analytics Redesign </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="span-4">
                                <ul class="items items-success">
                                    <li class="item active">
                                        <a href="###"><i class="ion">&#xe640;</i> Analytics Redesign </a>
                                    </li>
                                    <li class="item">
                                        <a href="###"><i class="ion">&#xe695;</i> Analytics Redesign </a>
                                    </li>
                                    <li class="item">
                                        <a href="###"><i class="ion">&#xe6a8;</i> Analytics Redesign </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="span-4">
                                <ul class="items">
                                    <li class="item active">
                                        <a href="###"><i class="ion">&#xe66c;</i> Analytics Redesign <span class="item-extra"><span class="badge"><sup class="badge-count badge-count-alone">13</sup></span></span> </a>
                                    </li>
                                    <li class="item">
                                        <a href="###"><i class="ion">&#xe66c;</i> Analytics Redesign <span class="item-extra"><span class="badge"><sup class="badge-count badge-count-alone">13</sup></span></span> </a>
                                    </li>
                                    <li class="item">
                                        <a href="###"><i class="ion">&#xe66c;</i> Analytics Redesign <span class="item-extra"><span class="badge"><sup class="badge-count badge-count-alone">13</sup></span></span> </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <table class="table">
                        <tr>
                            <td>.items</td>
                            <td>
                                定义列表容器
                            </td>
                        </tr>
                        <tr>
                            <td>.item</td>
                            <td>
                                定义列表项
                            </td>
                        </tr>
                        <tr>
                            <td>.item-extra</td>
                            <td>
                                定义列表右侧漂浮元素
                            </td>
                        </tr>
                        <tr>
                            <td>.active</td>
                            <td>
                                叠加在.item上使当前项为激活状态
                            </td>
                        </tr>
                        <tr>
                            <td>.item-info</td>
                            <td>
                                叠加.items使列表显示为指定色调，默认主色调(另："auxiliary", success", "info", "warning", "danger")
                            </td>
                        </tr>
                        <tr>
                            <td>.items-inverse</td>
                            <td>
                                叠加.items使用列表呈现颜色反转效果
                            </td>
                        </tr>
                    </table>
                    <p> </p>
                </dd>
                <dt id="label(标签)">label.less</dt>
                <dd>
                    <div class="playground">
                        <div class="m">
                            <span class="label">主色</span>
                            <span class="label label-auxiliary">辅助色</span>
                            <span class="label label-success">成功</span>
                            <span class="label label-info">信息</span>
                            <span class="label label-warning label-closable">警告<i class="ion">&#xe7de;</i></span>
                            <span class="label label-danger label-closable">危险<i class="ion">&#xe7de;</i></span>
                            <span class="label label-bordered">主色</span>
                            <span class="label label-bordered label-auxiliary">辅助色</span>
                            <span class="label label-bordered label-success">成功</span>
                            <span class="label label-bordered label-info">信息</span>
                            <span class="label label-bordered label-closable label-warning">警告<i class="ion">&#xe7de;</i></span>
                            <span class="label label-bordered label-closable label-danger">危险<i class="ion">&#xe7de;</i></span>
                        </div>
                        <div class="m">
                            <span class="label label-sm label-bordered">较小</span>
                            <span class="label label-sm label-bordered label-closable">较小 <i class="ion">&#xe7de;</i></span>
                            <span class="label label-sm">较小</span>
                            <span class="label label-sm label-closable">较小 <i class="ion">&#xe7de;</i></span>
                        </div>
                        <div class="m">
                            <span class="label label-lg label-bordered">较大</span>
                            <span class="label label-lg label-bordered label-closable">较大 <i class="ion">&#xe7de;</i></span>
                            <span class="label label-lg">较大</span>
                            <span class="label label-lg label-closable">较大 <i class="ion">&#xe7de;</i></span>
                        </div>
                    </div>
                    <table class="table">
                        <tr>
                            <td>.label</td>
                            <td>
                                定义标签元素
                            </td>
                        </tr>
                        <tr>
                            <td>.label-sm</td>
                            <td>
                                叠加.label显示为较小尺寸标签
                            </td>
                        </tr>
                        <tr>
                            <td>.label-lg</td>
                            <td>
                                叠加.label显示为较大尺寸标签
                            </td>
                        </tr>
                        <tr>
                            <td>.label-auxiliary</td>
                            <td>
                                叠加.label显示为辅色调，默认主色调(另："auxiliary", success", "info", "warning", "danger")
                            </td>
                        </tr>
                        <tr>
                            <td>.label-bordered</td>
                            <td>
                                叠加.label显示为边框线风格
                            </td>
                        </tr>
                        <tr>
                            <td>.label-closable</td>
                            <td>
                                叠加.label显示为带关闭按钮标签，需要配合.ion图标
                            </td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="rect(等比填充)">rect.less</dt>
                <dd>
                    <p>类<code>rect-[比例:number]</code>可以定义一个对应宽高比的矩形，内部<code>._full</code>子元素将充满该矩形，示例：</p>
                    <div class="playground">
                          <div class="row">
                              <div class="span-4">
                                  <div class="rect-100">
                                    <img src="http://temp.im/400x400/" class="_full">
                                  </div>
                              </div>
                              <div class="span-4">
                                  <div class="rect-75">
                                    <img src="http://temp.im/400x400/" class="_full">
                                  </div>
                              </div>
                              <div class="span-4">
                                  <div class="rect-50">
                                    <img src="http://temp.im/400x200/" class="_full">
                                  </div>
                              </div>
                          </div>        
                    </div>
                    <p>内置比例：</p>
                    <table class="table">
                        <tr>
                            <td>.rect-4854</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>.rect-50</td>
                            <td>2比1</td>
                        </tr>
                        <tr>
                            <td>.rect-5625</td>
                            <td>16比9</td>
                        </tr>
                        <tr>
                            <td>.rect-60</td>
                            <td>5比3</td>
                        </tr>
                        <tr>
                            <td>.rect-618</td>
                            <td>黄金分割</td>
                        </tr>
                        <tr>
                            <td>.rect-70</td>
                            <td>10比7</td>
                        </tr>
                        <tr>
                            <td>.rect-75</td>
                            <td>4比3</td>
                        </tr>
                        <tr>
                            <td>.rect-80</td>
                            <td>5比4</td>
                        </tr>
                        <tr>
                            <td>.rect-90</td>
                            <td>10比9</td>
                        </tr>
                        <tr>
                            <td>.rect-100</td>
                            <td>1比1</td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="reset(样式重置)">reset.less</dt>
                <dd>
                    <p>样式重置的目的在于清除浏览器的默认样式，带来一个干净的定制空间，在此基础上还额外做了一些事情：</p>
                    <ol>
                        <li>去掉触屏下链接点击背景色；</li>
                        <li>设置图片最大宽度100%，开发中会造成的常见问题是图片类效果插件显示异常，或百度地图这类自带图片资源的第三方插件显示异常，只要针对性的添加<code>max-width:none</code>即可；</li>
                        <li>对a标签添加0.3s的过渡动画；</li>
                    </ol>
                </dd>
                <dt id="space(间距)">space.less</dt>
                <dd>
                    <p></p>
                    <table class="table">
                        <tr>
                            <td>.m</td>
                            <td>四周margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-0</td>
                            <td>四周margin归零</td>
                        </tr>
                        <tr>
                            <td>.m-l</td>
                            <td>左方margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-t</td>
                            <td>上方margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-r</td>
                            <td>右方margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-b</td>
                            <td>下方margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-lr</td>
                            <td>左右两侧margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-tb</td>
                            <td>上下两侧margin普通距离</td>
                        </tr>
                        <tr>
                            <td>.m-sm</td>
                            <td>四周margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-l-sm</td>
                            <td>左方margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-t-sm</td>
                            <td>上方margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-r-sm</td>
                            <td>右方margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-b-sm</td>
                            <td>下方margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-lr-sm</td>
                            <td>左右两侧margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-tb-sm</td>
                            <td>上下两侧margin较小距离</td>
                        </tr>
                        <tr>
                            <td>.m-lg</td>
                            <td>四周margin较大距离</td>
                        </tr>
                        <tr>
                            <td>.m-l-lg</td>
                            <td>左侧margin较大距离</td>
                        </tr>
                        <tr>
                            <td>.m-t-lg</td>
                            <td>上方margin较大距离</td>
                        </tr>
                        <tr>
                            <td>.m-r-lg</td>
                            <td>右侧margin较大距离</td>
                        </tr>
                        <tr>
                            <td>.m-b-lg</td>
                            <td>下方margin较大距离</td>
                        </tr>
                        <tr>
                            <td>.m-lr-lg</td>
                            <td>左右两侧margin较大距离</td>
                        </tr>
                        <tr>
                            <td>.m-tb-lg</td>
                            <td>上下方向margin较大距离</td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="spin(等待动画)">spin.less</dt>
                <dd>
                    <div class="playground">
                        <div class="p-lg m-tb pr">
                            <div class="spin-wrap text-primary">
                                <div class="spin-main">
                                    <div class="spin-text"><i class="ion spin-icon-load">&#xe66e;</i>
                                        <div>Loading</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table class="table">
                        <tr>
                            <td>.spin-icon-load</td>
                            <td>图标匀速旋转动画</td>
                        </tr>
                        <tr>
                            <td>.spin-size-sm</td>
                            <td>小尺寸等待动画</td>
                        </tr>
                        <tr>
                            <td>.spin-size-lg</td>
                            <td>大尺寸等待动画</td>
                        </tr>
                        
                    </table>
                    <p></p>
                </dd>
                <dt id="switch(开关)">switch.less</dt>
                <dd>
                    <div class="playground">
                        <div class="m-b">
                            <label class="switch switch-primary m-r">
                                <div class="track">
                                    <div class="handle"></div>
                                </div>
                            </label>
                            <label class="switch switch-primary switch-on m-r">
                                <div class="track">
                                    <div class="handle"></div>
                                </div>
                            </label>
                            <label class="switch switch-primary switch-disabled m-r">
                                <div class="track">
                                    <div class="handle"></div>
                                </div>
                            </label>
                            <label class="switch switch-round switch-success m-r">
                                <div class="track">
                                    <div class="handle"></div>
                                </div>
                            </label>
                            <label class="switch switch-round switch-success switch-on m-r">
                                <div class="track">
                                    <div class="handle"></div>
                                </div>
                            </label>
                            <label class="switch switch-round switch-success switch-disabled m-r">
                                <div class="track">
                                    <div class="handle"></div>
                                </div>
                            </label>
                        </div>
                        <div class="m-b">
                            <label class="switch switch-sm switch-on m-r">
                                <div class="track">
                                    <div class="handle"></div>
                                </div>
                            </label>
                            <label class="switch switch-warning switch-on m-r">
                                <div class="track">
                                    <div class="handle"></div>
                                </div>
                            </label>
                            <label class="switch switch-lg switch-danger switch-on m-r">
                                <div class="track">
                                    <div class="handle"></div>
                                </div>
                            </label>
                        </div>
                        
                    </div>
                    <table class="table">
                        <tr>
                            <td>.switch</td>
                            <td>定义一个开关容器</td>
                        </tr>
                        <tr>
                            <td>.track</td>
                            <td>定义开关滑轨</td>
                        </tr>
                        <tr>
                            <td>.handle</td>
                            <td>定义开关波动手柄</td>
                        </tr>
                        <tr>
                            <td>.switch-on</td>
                            <td>叠加在容器上使开关显示开启状态</td>
                        </tr>
                        <tr>
                            <td>.switch-disabled</td>
                            <td>叠加在容器上使开关显示不可用状态</td>
                        </tr>
                        <tr>
                            <td>.switch-round</td>
                            <td>叠加在容器上使开关显示为圆角</td>
                        </tr>
                        <tr>
                            <td>.switch-sm</td>
                            <td>叠加在容器上使开关显示为较小尺寸</td>
                        </tr>
                        <tr>
                            <td>.switch-lg</td>
                            <td>叠加在容器上使开关显示为较大尺寸</td>
                        </tr>
                        <tr>
                            <td>.switch-primary</td>
                            <td>叠加在容器上使开关显示为主色调(另："auxiliary", success", "info", "warning", "danger")</td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="table(表格)">table.less</dt>
                <dd>
                    <p>美化表格，示例参见该文档中的表格，具有三种叠加状态：</p>
                    <table class="table">
                        <tr>
                            <td>table-bordered</td>
                            <td>四周带边框线</td>
                        </tr>
                        <tr>
                            <td>table-condensed</td>
                            <td>紧凑型间距</td>
                        </tr>
                        <tr>
                            <td>table-striped</td>
                            <td>斑马线</td>
                        </tr>
                        <tr>
                            <td>table-hover</td>
                            <td>整行悬浮着色</td>
                        </tr>
                        <tr>
                            <td>table-responsive</td>
                            <td>响应式</td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="tools(常用工具)">tools.less</dt>
                <dd>
                    <p></p>
                    <table class="table">
                        <tr>
                            <td>.wrap</td>
                            <td>定义主体内容区域，默认宽度自适应，最大宽度1000px，在移动端左右两边各有2%的间距，宽度支持自定义。</td>
                        </tr>
                        <tr>
                            <td>.fix</td>
                            <td>清除浮动(撑起浮动)</td>
                        </tr>
                        <tr>
                            <td>.oh</td>
                            <td>超出隐藏，同时有清浮动的作用</td>
                        </tr>
                        <tr>
                            <td>.l / .r</td>
                            <td>左 / 右浮动</td>
                        </tr>
                        <tr>
                            <td>.dib</td>
                            <td>使元素呈现为inline-block</td>
                        </tr>
                        <tr>
                            <td>.pr / .pa</td>
                            <td>相 / 绝对定位</td>
                        </tr>
                        <tr>
                            <td>.tc / .tr</td>
                            <td>居中对齐 / 居右对齐</td>
                        </tr>
                        <tr>
                            <td>.el</td>
                            <td>文字单行显示超出显示为省略号</td>
                        </tr>
                        <tr>
                            <td>.hide</td>
                            <td>隐藏元素</td>
                        </tr>
                        <tr>
                            <td>.hidetext</td>
                            <td>隐藏元素内的文字</td>
                        </tr>
                        <tr>
                            <td>.arr</td>
                            <td>border绘图的基础类，实现了一个宽高为0的inline-block元素</td>
                        </tr>
                        <tr>
                            <td>.justify</td>
                            <td>单行文字两端对齐，需设置高度</td>
                        </tr>
                        <tr>
                            <td>.scrollbar</td>
                            <td>应用到容器元素，美化滚动条样式</td>
                        </tr>
                        <tr>
                            <td>.scrollbar-dark</td>
                            <td>叠加到.scrollbar呈现黑色调滚动条样式</td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="menu(菜单)">menu.less</dt>
                <dd>
                    <h5>横向</h5>
                    <div class="playground">
                        <nav class="m-b">
                            <ul class="menu-ui menu-horizontal menu-light">
                                <li class="menu-item menu-item-active"><i class="ion">&#xe64a;</i>首页</li>
                                <li class="menu-item">订单</li>
                                <li class="menu-item">会员 <i class="menu-sub-ion ion">&#xe609;</i></li>
                                <li class="menu-item">店铺</li>
                                <li class="menu-item">系统</li>
                            </ul>
                        </nav>
                        <nav class="m-b">
                            <ul class="menu-ui menu-horizontal menu-dark">
                                <li class="menu-item menu-item-active"><i class="ion">&#xe64a;</i>首页</li>
                                <li class="menu-item">订单</li>
                                <li class="menu-item">会员 <i class="menu-sub-ion ion">&#xe609;</i></li>
                                <li class="menu-item">店铺</li>
                                <li class="menu-item">系统</li>
                            </ul>
                        </nav>
                        <nav class="m-b">
                            <ul class="menu-ui menu-horizontal menu-primary">
                                <li class="menu-item menu-item-active"><i class="ion">&#xe64a;</i>首页</li>
                                <li class="menu-item">订单</li>
                                <li class="menu-item">会员 <i class="menu-sub-ion ion">&#xe609;</i></li>
                                <li class="menu-item">店铺</li>
                                <li class="menu-item">系统</li>
                            </ul>
                        </nav>
                    </div>
                    <h5>纵向</h5>
                    <div class="playground">
                        <div class="row m-t">
                            <nav class="span-3">
                                <ul class="menu-ui menu-vertical menu-light">
                                    <li class="menu-item">首页<i class="menu-sub-ion ion">&#xe609;</i></li>
                                    <li class="menu-item">订单</li>
                                    <li class="menu-submenu menu-opened">
                                        <div class="menu-item-title">会员<i class="menu-sub-ion ion">&#xe609;</i></div>
                                        <ul class="menu-sub-group">
                                            <li class="menu-item  menu-item-active">文章管理</li>
                                            <li class="menu-item">评论管理</li>
                                            <li class="menu-item">举报管理</li>
                                        </ul>
                                    </li>
                                    <li class="menu-item">店铺</li>
                                    <li class="menu-item">系统</li>
                                </ul>
                            </nav>
                            <nav class="span-3">
                                <ul class="menu-ui menu-vertical menu-dark">
                                    <li class="menu-item">首页<i class="menu-sub-ion ion">&#xe609;</i></li>
                                    <li class="menu-item">订单</li>
                                    <li class="menu-submenu menu-opened">
                                        <div class="menu-item-title">会员<i class="menu-sub-ion ion">&#xe609;</i></div>
                                        <ul class="menu-sub-group">
                                            <li class="menu-item  menu-item-active">文章管理</li>
                                            <li class="menu-item">评论管理</li>
                                            <li class="menu-item">举报管理</li>
                                        </ul>
                                    </li>
                                    <li class="menu-item">店铺</li>
                                    <li class="menu-item">系统</li>
                                </ul>
                            </nav>
                            <nav class="span-3">
                                <ul class="menu-ui menu-vertical menu-primary">
                                    <li class="menu-item">首页<i class="menu-sub-ion ion">&#xe609;</i></li>
                                    <li class="menu-item">订单</li>
                                    <li class="menu-submenu menu-opened">
                                        <div class="menu-item-title">会员<i class="menu-sub-ion ion">&#xe609;</i></div>
                                        <ul class="menu-sub-group">
                                            <li class="menu-item  menu-item-active">文章管理</li>
                                            <li class="menu-item">评论管理</li>
                                            <li class="menu-item">举报管理</li>
                                        </ul>
                                    </li>
                                    <li class="menu-item">店铺</li>
                                    <li class="menu-item">系统</li>
                                </ul>
                            </nav>
                        </div>  
                    </div>
                    <table class="table">
                        <tr>
                            <td>.menu-ui</td>
                            <td>定义菜单元素</td>
                        </tr>
                        <tr>
                            <td>.menu-horizontal/.menu-vertical</td>
                            <td>叠加在菜单元素上，定义菜单方向类型</td>
                        </tr>
                        <tr>
                            <td>.menu-light/.menu-dark/.menu-primary</td>
                            <td>叠加在菜单元素上，定义菜单主题</td>
                        </tr>
                        <tr>
                            <td>.menu-item</td>
                            <td>定义菜单项目</td>
                        </tr>
                        <tr>
                            <td>.menu-item-active</td>
                            <td>叠加在菜单项目上，定义激活状态</td>
                        </tr>
                        <tr>
                            <td>.menu-sub-ion</td>
                            <td>在菜单项目内定义菜单子项目状态图标</td>
                        </tr>
                        <tr>
                            <td>.menu-submenu</td>
                            <td>定义包含子菜单的项</td>
                        </tr>
                        <tr>
                            <td>.menu-opened</td>
                            <td>叠加在menu-submenu上指示子菜单为打开状态</td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="page(分页)">page.less</dt>
                <dd>
                    <div class="playground">
                        <ul class="pagination m-tb">
                            <li><a href="javascript:;" class="unable">上一页</a></li>
                            <li class="active"><a href="javascript:;">1</a></li>
                            <li><a href="javascript:;">2</a></li>
                            <li><a href="javascript:;">3</a></li>
                            <li><a href="javascript:;">4</a></li>
                            <li><a href="javascript:;">5</a></li>
                            <li><a href="javascript:;">...</a></li>
                            <li><a href="javascript:;">下一页</a></li>
                        </ul>
                    </div>
                    
                    <table class="table">
                        <tr>
                            <td>.pagination</td>
                            <td>定义分页</td>
                        </tr>
                        <tr>
                            <td>.pagination > li > a.unable</td>
                            <td>不可用的分页链接</td>
                        </tr>
                        <tr>
                            <td>.pagination > li.active</td>
                            <td>当前页</td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
                <dt id="progress(进度条)">progress.less</dt>
                <dd>
                    <div class="playground">
                        <div class="row m-tb">
                            <div class="span-6 m-tb">
                                <div class="progress progress-info progress-active">
                                    <div class="progress-inner">
                                        <div class="progress-bg" style="width: 65%;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="span-6 m-tb">
                                <div class="progress progress-danger progress-show-info" >
                                    <div class="progress-inner">
                                        <div class="progress-bg" style="width: 65%;"></div>
                                    </div>
                                    <span class="progress-text"><span class="progress-text-inner"> <i class="ion">&#xe623;</i>失败</span></span>
                                </div>
                            </div>
                            <div class="span-6 m-tb">
                                <div class="progress progress-primary progress-active progress-show-info" >
                                    <div class="progress-inner">
                                        <div class="progress-bg" style="width: 65%;"></div>
                                    </div>
                                    <span class="progress-text"><span class="progress-text-inner">65%</span></span>
                                </div>
                            </div>
                            <div class="span-6 m-tb">
                                <div class="progress progress-success progress-show-info" >
                                    <div class="progress-inner">
                                        <div class="progress-bg" style="width: 100%;"></div>
                                    </div>
                                    <span class="progress-text"><span class="progress-text-inner"><i class="ion">&#xe924;</i>成功</span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <table class="table">
                        <tr>
                            <td>.progress</td>
                            <td>定义进度条元素</td>
                        </tr>
                        <tr>
                            <td>.progress-inner</td>
                            <td>进度条轨道</td>
                        </tr>
                        <tr>
                            <td>.progress-bg</td>
                            <td>已完成进度条</td>
                        </tr>
                        <tr>
                            <td>.progress-text</td>
                            <td>进度条信息容器</td>
                        </tr>
                        <tr>
                            <td>.progress-active</td>
                            <td>叠加在.progress上呈现活动状态</td>
                        </tr>
                        <tr>
                            <td>.progress-show-info</td>
                            <td>叠加在.progress上以显示进度条信息</td>
                        </tr>
                        <tr>
                            <td>progress-primary</td>
                            <td>叠加在.progress上以显示为主色调(另："auxiliary", success", "info", "warning", "danger")</td>
                        </tr>
                    </table>
                    <p></p>
                </dd>
        </dl>
    </section>
    <section class="wrap" id="js">
        <h2>Javascript</h2>
        <h3 id="js-module">模块化开发</h3>
        <p>框架基于<a href="http://seajs.org/docs/" target="_blank">Seajs</a> 实现js模块化开发，模块化很重要价值是前后端分离，引用js不再是页面底部的一堆script标签，js的增删改都不需要编辑、发布前台模板，使js代码可以向css一样容易维护，更多资料可以参考：<a href="https://github.com/seajs/seajs/issues/547" target="_blank">前端模块化开发的价值</a>。</p>
        <p>基于模块化加载方式，网站脚本拆分为两部分：<code>业务代码</code>和<code>组件</code></p>
        <p><code>业务代码</code>是具体业务脚本，每个页面模板都有一个对应的js文件放在项目内<code>js/</code>文件夹中，<code>js/</code>里还有一个<code>common.js</code>用于管理公用代码，这个文件夹组成了站点的业务层。</p>
        <p><code>组件</code>是对特定功能的封装，如jquery、轮显效果、视频播放器，日期选择器，表单验证等，用于被业务层调用，实现特定功能。模块封装相关文档见 <a href="https://github.com/seajs/seajs/issues/242" target="_blank">CMD模块定义规范</a>。 </p>
        <h4>加载模块</h4>
        <p><code>seajs.use()</code>方法可以启动并执行一个模块化的js文件，如首页底部的：<code>seajs.use('js/index');</code>，将启动并执行"js/index.js"，首页里的js效果都要在这里实现。</p>
        <p>要使用某功能模块，就要先引用模块，语法是<code>require("模块路径")</code>，或者用异步加载的方式<code>require.async("模块路径"，"回调方法")</code>。</p>
        <p>以index.js为例：</p>
        <pre>
            <code>
  /*
   * index.js
   */
  define(function(require, exports, module) {
     var $ = require('jquery');
     var base=require('base');
     var com = require('./common');
     //...
     
  })
              </code>
        </pre>
        <p>index.js里分别引用了jquery，base和common，并将他们的返回值分别赋值。</p>
        <p>并不是所有的模块都有返回值，例如common模块多数时候只是存放网站通用代码，导航栏、返回顶部、分享代码之类，很少对外提供方法，如果确定一个模块不需要任何返回值也可以只引用不赋值，例如 <code>require('./common')</code>，大多数jquery插件模块也都没有返回值，因为jquery插件方法都扩展在jquery对象上，可以直接通过<code>$.METHODNAME</code>的方式使用。</p>
        <h4>异步加载</h4>
        <p>异步加载的模块不会提前就位，而是当前代码执行到该行时才开始请求模块文件，对于jquery和common这种被其他代码强依赖的模块我们希望尽快加载生效，因此使用同步加载，对于大多数效果类模块则应适度使用异步加载，以提高页面性能，但首屏效果应使用同步加载，以提高首屏响应速度。</p>
        <p><code>require.async</code>得到的模块对象无法通过赋值保存，只能在回调函数中接收为参数，以百度分享模块为例： </p>
        <pre>
            <code>
   require.async('bdshare',function(bdshare){
        //接收百度分享对象：bdshare  
      bdshare({
         bdSize : 16
      });
   });
              </code>
        </pre>
        <h4 id="js-base-common">公共代码</h4>
        <p><code>common.js</code>用于管理整站公用代码，默认被所有业务层js引用。</p>

        <h3 id="js-modules">组件列表</h3>
        <nav class="modules_index" id="modules_index"></nav>
        <p></p>
        <dl class="dl modules_list" id="modules_list">
            <dt id="Audio(跨平台音频播放)">audio</dt>
            <dd>
                <h5>描述</h5>
                <p>跨平台音频播放器，详见<a href="http://kolber.github.io/audiojs/" target="_blank">官网</a></p>
                <h5>配置</h5>
                <p>无</p>
                <h5>示例</h5>
                <pre> <code>
          &lt;!--html--&gt;
          &lt;audio preload="auto" &gt;
             &lt;source src="http://static.refined-x.com/sample.mp3" /&gt;
          &lt;/audio&gt;
                              </code>
                </pre>
                <pre> <code>
          //js
          require('audio');
          audiojs.events.ready(function() {
            var as = audiojs.createAll();
          });
                            </code>
                </pre>
            </dd>
            <dt id="Copy(复制到剪贴板)">Copy</dt>
            <dd>
                <h5>描述</h5>
                <p>利用flash技术实现复制文字到剪贴板，详细参数见<a href="http://www.steamdev.com/zclip/" target="_blank">官网</a></p>
                <h5>示例</h5>
                <pre> <code>
          &lt;div id="d_clip_button"&gt;复制&lt;/div&gt;
                                </code>
                </pre>
                <pre> <code>
          require('copy');

          $('#d_clip_button').zclip({
            copy: "测试" + Math.random(),
            afterCopy:function(){
              console.log('复制成功');
            }
          });
                            </code>
                </pre>
            </dd>
            <dt id="Flv(flv/swf播放器)">flv</dt>
            <dd>
                <h5>描述</h5>
                <p>集成vcastr3.0视频播放器，传入视频地址，返回播放器html，支持格式：.swf/.flv</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>src</th>
                            <td>视频地址</td>
                        </tr>
                        <tr>
                            <th>width</th>
                            <td>宽,默认480</td>
                        </tr>
                        <tr>
                            <th>height</th>
                            <td>高,默认320</td>
                        </tr>
                        <tr>
                            <th>auto</th>
                            <td>默认false，自动播放</td>
                        </tr>
                        <tr>
                            <th>ctrl</th>
                            <td>默认true，是否有播放控件</td>
                        </tr>
                        <tr>
                        </tr>
                        <tr>
                            <th>loop</th>
                            <td>默认false，是否循环播放</td>
                        </tr>
                        <tr>
                            <th>logo</th>
                            <td>Logo处显示的文字</td>
                        </tr>
                        <tr>
                            <th>id</th>
                            <td>给embed标签添加id，默认无</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;!-- html --&gt;
          &lt;div class="playarea2"&gt;&lt;/div&gt;
          &lt;div class="playarea3"&gt;&lt;/div&gt;
                                </code>
                </pre>
                <pre> <code>
          //js
          var player=require('flv');

          var player_2 = player({
             src: 'http://static.refined-x.com/sample.flv',
             loop:true
          });
          var player_3 = player({
             src:'http://player.youku.com/player.php/sid/XOTIwMDA5Nzk2/v.swf'
          });

          //将播放器插入页面
          $('.playarea2').html(player_2);
          $('.playarea3').html(player_3);
                              </code>
                </pre>
            </dd>
            <dt id="jquery">jQuery</dt>
            <dd>
                <h5>描述</h5>
                <p>封装1.x、2.x和3.x版本的jquery，seajs.config.js中已配置别名，默认使用1.x</p>
                <h5>示例</h5>
                <pre> <code>
            var $ = require('jquery');
            console.log($);
                                    </code>
                </pre>
            </dd>
            <dt id="Raty(评分)">raty</dt>
            <dd>
                <h5>描述</h5>
                <p>评分插件，来自https://github.com/wbotelhos/raty</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>
                                cancel：
                            </th>
                            <td>
                                默认false，创建一个取消按钮；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                cancelPlace：
                            </th>
                            <td>
                                默认'left'，取消按钮的位置
                            </td>
                        </tr>
                        <tr>
                            <th>
                                click：
                            </th>
                            <td>
                                默认undefind，点击回调
                            </td>
                        </tr>
                        <tr>
                            <th>
                                half：
                            </th>
                            <td>
                                默认false，允许半星
                            </td>
                        </tr>
                        <tr>
                            <th>
                                hints:
                            </th>
                            <td>
                                默认 ['bad', 'poor', 'regular', 'good', 'gorgeous']，每颗星星对应的提示
                            </td>
                        </tr>
                        <tr>
                            <th>
                                mouseout：
                            </th>
                            <td>
                                默认undefind，mouseout回调
                            </td>
                        </tr>
                        <tr>
                            <th>
                                mouseover：
                            </th>
                            <td>
                                默认undefind，mouseover回调
                            </td>
                        </tr>
                        <tr>
                            <th>
                                number：
                            </th>
                            <td>
                                默认5，评分的总星数
                            </td>
                        </tr>
                        <tr>
                            <th>
                                precision：
                            </th>
                            <td>
                                默认false，允许选择一个更精确的分数
                            </td>
                        </tr>
                        <tr>
                            <th>
                                readOnly：
                            </th>
                            <td>
                                默认false，让评分不可更改
                            </td>
                        </tr>
                        <tr>
                            <th>
                                score：
                            </th>
                            <td>
                                默认undefind，初始分数
                            </td>
                        </tr>
                        <tr>
                            <th>
                                scoreName：
                            </th>
                            <td>
                                默认'score'，评分插件会创建一个隐藏域存储分数，该项定义隐藏域的name
                            </td>
                        </tr>
                        <tr>
                            <th>
                                single：
                            </th>
                            <th>
                                默认false，评分时只有当前那颗星被点亮
                            </th>
                        </tr>
                        <tr>
                            <th>
                                space：
                            </th>
                            <td>
                                默认true，星星之间是否有间距
                            </td>
                        </tr>
                        <tr>
                            <th>
                                target：
                            </th>
                            <td>
                                默认undefind，jquery选择器格式或原生DOM元素，评分将被显示在该元素中
                            </td>
                        </tr>
                        <tr>
                            <th>
                                targetFormat：
                            </th>
                            <td>
                                默认'{score}'，输出到target的格式模板
                            </td>
                        </tr>
                        <tr>
                            <th>
                                targetKeep：
                            </th>
                            <td>
                                默认false，当鼠标离开星星时target中的分数是否保留
                            </td>
                        </tr>
                        <tr>
                            <th>
                                targetScore：
                            </th>
                            <td>
                                默认undefind，jquery选择器格式或原生DOM元素，用来存储分数的input选择器，插件将不再生成默认隐藏域
                            </td>
                        </tr>
                        <tr>
                            <th>
                                targetText：
                            </th>
                            <td>
                                默认''，目标input的默认显示文字
                            </td>
                        </tr>
                        <tr>
                            <th>
                                targetType：
                            </th>
                            <td>
                                默认'hint'，目标input显示的类型，可选'score'
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;div class="demo"&gt;&lt;/div&gt;
                                  </code>
                </pre>
                <pre> <code>
          require('raty');
          $('.demo').raty({
            click:function(val){
                console.log('打了'+val+'颗星');
            }
          });
                                  </code>
                </pre>
            </dd>
            <dt id="Upload(上传)">upload</dt>
            <dd>
                <h5>描述</h5>
                <p>上传插件，支持html5或ifram方式，改自<a href="https://github.com/aralejs/upload" target="_blank">aralejs/upload</a>，集成<a href="https://github.com/think2011/localResizeIMG" target="_blank">localResizeIMG</a>插件实现前端图片压缩，集成<a href="https://github.com/kairyou/html5-make-thumb"
                        target="_blank">html5-make-thumb</a>实现选择图片返回缩略图。</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>trigger</th>
                            <td>唤出文件选择器，可以是：选择器、element、jQuery Object</td>
                        </tr>
                        <tr>
                            <th>name</th>
                            <td>上传文件时对应的 name</td>
                        </tr>
                        <tr>
                            <th>action</th>
                            <td>表单提交的地址。</td>
                        </tr>
                        <tr>
                            <th>data</th>
                            <td>随表单一起要提交的数据，支持object格式或同步返回数据的function。</td>
                        </tr>
                        <tr>
                            <th>accept</th>
                            <td>支持的文件类型，比如 image/\* 为只上传图片类的文件。可选项。</td>
                        </tr>
                        <tr>
                            <th>change</th>
                            <td>选择文件回调，回调参数为当前所选文件对象。若不设置，选择文件将自动上传，默认null</td>
                        </tr>
                        <tr>
                            <th>progress</th>
                            <td>上传的进度回调，不支持 IE9-。回调的参数分别为 ajaxEvent, 当前上传字节，总字节，进度百分比和当前文件列表。</td>
                        </tr>
                        <tr>
                            <th>error</th>
                            <td>上传失败的回调函数。</td>
                        </tr>
                        <tr>
                            <th>multiple</th>
                            <td>是否支持多文件上传。默认为 false。</td>
                        </tr>
                        <tr>
                            <th>compress</th>
                            <td>图片是否上传前压缩。默认为 false。</td>
                        </tr>
                        <tr>
                            <th>compressOption</th>
                            <td>上传压缩参数。默认 {}，可配置width和height。</td>
                        </tr>
                        <tr>
                            <th>thumb</th>
                            <td>接收缩略图的回调，回调参数为缩略图base64和文件对象。仅支持IE10及以上浏览器。</td>
                        </tr>
                        <tr>
                            <th>thumbOption</th>
                            <td>生成缩略图的配置，默认
                                <pre> <code>
        width: 0,               // thumbnail width
        height: 0,              //thumbnail height
        fill: false,            // fill color when the image is smaller than thumbnails size.
        background: '#fff',     // fill color‎
        type: 'image/jpeg',     // mime-type for thumbnail ('image/jpeg' | 'image/png')
        size: 'contain',        // CSS3 background-size: contain | cover | auto
        mark: {},               // watermark
          // text watermark.
          // mark = {padding: 5, height: 18, text: 'test', color: '#000', font: '400 18px Arial'}
          // font: normal, bold, italic
          // bgColor: '#ccc' (background color); bgPadding: 5 (padding)
          // image watermark. (Note: cross-domain is not allowed)
          // mark = {padding: 5, src: 'mark.png', width: 34, height: 45};
        stretch: false,         // stretch image(small versions) to fill thumbnail (size = auto | contain)
        before: null,           // call function before process image.
        fail: null,             // error function
        always: null            // complete function(done|fail)
                                                  </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>success</th>
                            <td>上传成功的回调函数。</td>
                        </tr>
                    </tbody>
                </table>
                <h5>演示</h5>
                <pre>
                    <code>
    &lt;div class=&quot;wrap&quot;&gt;
         &lt;div class=&quot;row&quot;&gt;
             &lt;div class=&quot;span-6&quot;&gt;
                 &lt;form class=&quot;form m&quot; id=&quot;myform&quot;&gt;
                    &lt;p class=&quot;form-group&quot;&gt;key1：&lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;key1&quot; value=&quot;value1&quot;&gt;&lt;/p&gt;
                    &lt;p class=&quot;form-group&quot;&gt;key2：&lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;key2&quot; value=&quot;value2&quot;&gt;&lt;/p&gt;
                    &lt;p class=&quot;form-group&quot;&gt;文件名称：&lt;input type=&quot;text&quot; class=&quot;form-control&quot; readonly id=&quot;filename&quot;&gt;&lt;/p&gt;
                    &lt;div class=&quot;from-group&quot;&gt;
                        &lt;button type=&quot;button&quot; id=&quot;selectFile&quot; class=&quot;btn btn-primary&quot;&gt;选择&lt;/button&gt;
                        &lt;button type=&quot;button&quot; id=&quot;doupload&quot; class=&quot;btn btn-warning&quot;&gt;上传&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/form&gt;                                    
                &lt;div class=&quot;m&quot; id=&quot;uploaded&quot;&gt;&lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/div&gt;
                    </code>
                </pre>
                <pre>
                    <code>
    require.async('upload', function(Uploader) {
        var uploader = new Uploader({
            trigger: '#selectFile',
            name: 'file',
            data: function() {
                var serializeArray = $('#myform').serializeArray(),
                    formData = {};
                $.each(serializeArray, function(i, e) {
                    formData[e.name] = e.value;
                });
                return formData;
            },
            action: "http://host.refined-x.com/test/fileupload.php",
            change: function(file) {
                $('#filename').val(file[0].name);
            },
            progress: function(event, position, total, percent) {
                console.log('已上传 ' + position + '/' + total + ' ' + percent + '%');
            },
            success: function(response) {
                $('#uploaded').html('&lt;img src="' + response.path + '" alt="" /&gt;');
            }
        });

        $('#doupload').on('click', function() {
            uploader.submit();
        });
    });
                                  </code>
                </pre>
            </dd>
            <dt id="Validform(表单验证)">validform</dt>
            <dd>
                <h5>描述</h5>
                <p>validform表单验证，整合密码强度验证插件。</p>
                <h5>内置验证规则</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>
                                *：
                            </th>
                            <td>
                                检测是否有输入，可以输入任何字符，不留空即可通过验证；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                *4-16：
                            </th>
                            <td>检测是否为4到16位任意字符；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                n：</th>
                            <td>数字类型；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                n4-16：</th>
                            <td>4到16位数字；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                f：</th>
                            <td>浮点数类型；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                s：</th>
                            <td>字符串类型；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                s4-16：</th>
                            <td>4到16位字符串；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                p：</th>
                            <td>验证邮政编码；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                m：</th>
                            <td>手机号码格式；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                tel：</th>
                            <td>座机号码格式；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                phone：</th>
                            <td>手机或座机号码格式；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                e：</th>
                            <td>email格式；
                            </td>
                        </tr>
                        <tr>
                            <th>
                                url：</th>
                            <td>验证字符串是否为网址
                            </td>
                        </tr>
                        <tr>
                            <th>
                                其他验证直接写正则
                            </th>
                            <td>例如验证中文：<code>datatype="/^[\u4e00-\u9fa5]*$/"</code></td>
                        </tr>
                    </tbody>
                </table>
                <h5>配置</h5>
                <p>这里只列举新增配置和开发中常见问题，普通使用参考演示demo，使用细节访问<a href="http://validform.rjboy.cn/document.html" target="_blank">官方文档</a>。</p>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>
                                allable:
                            </th>
                            <td>
                                默认<code>false</code>，设置为true将提交属性为disable的元素值
                            </td>
                        </tr>
                        <tr>
                            <th>
                                tiptype:
                            </th>
                            <td>
                                默认<code>1</code>，验证结果显示方式，1:弹出提示，2:输入框后插入
                            </td>
                        </tr>
                        <tr>
                            <th>
                                tipSweep:
                            </th>
                            <td>
                                默认<code>true</code>，是否只在提交前集中验证，每个输入框blur都会出发验证
                            </td>
                        </tr>
                        <tr>
                            <th>
                                dataType：
                            </th>
                            <td>
                                默认<code>"json"</code>，ajax提交方式的返回数据格式
                            </td>
                        </tr>
                        <tr>
                            <th>
                                ajaxData:
                            </th>
                            <td>
                                默认无，ajax提交方式的扩展数据，json || function(reutrn json)
                            </td>
                        </tr>
                        <tr>
                            <th>ajaxurl</th>
                            <td>
                                <p>ajaxurl(实时验证)的处理页需要返回的数据格式：</p>
                                <pre> <code>
          /*
          * type: json
          * status: 状态，"y"或"n"
          * info: 返回信息，当status不为"y"时此信息将以错误提示的形式显示
          */
          {
            "status": "n",
            "info": "用户名已被注册！"
          }
                                          </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>beforeCheck</th>
                            <td>
                                <p>表单验证前的操作，如果明确<code>"return false"</code>将不会继续执行表单验证</p>
                            </td>
                        </tr>
                        <tr>
                            <th>beforeSubmit</th>
                            <td>
                                <p>验证后、提交前的操作，如果明确<code>"return false"</code>表单将不被提交</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> 
                    <code>
    &lt;style&gt;
        .demo {
            width: 50em;
            margin:auto;
        }
    &lt;/style&gt;

    &lt;form class=&quot;demo form&quot; id=&quot;reg_form&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;control-label&quot;&gt;用户名：&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;username&quot; datatype=&quot;/^[A-Za-z0-9\u9fa5@\u9fa5.]{2,20}$/&quot; sucmsg=&quot;用户名验证通过！&quot; nullmsg=&quot;请输入用户名！&quot; errormsg=&quot;用户名非法!&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;control-label&quot;&gt;密 码：&lt;/label&gt;
            &lt;input type=&quot;password&quot; class=&quot;form-control&quot; name=&quot;userpassword&quot; datatype=&quot;*6-15&quot; errormsg=&quot;密码范围在6~15位之间！&quot; plugin=&quot;passwordStrength&quot;&gt;
            &lt;span class=&quot;passwordStrength r&quot;&gt;&lt;span&gt;弱&lt;/span&gt;&lt;span&gt;中&lt;/span&gt;&lt;span class=&quot;last&quot;&gt;强&lt;/span&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;control-label&quot;&gt;确认密码：&lt;/label&gt;
            &lt;input type=&quot;password&quot; class=&quot;form-control&quot; name=&quot;userpassword2&quot; datatype=&quot;*&quot; recheck=&quot;userpassword&quot; errormsg=&quot;您两次输入的密码不一致！&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;control-label&quot;&gt;邮箱：&lt;/label&gt;
            &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;email&quot; datatype=&quot;e&quot; errormsg=&quot;请输入正确的邮箱!&quot; ignore=&quot;ignore&quot;&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;label class=&quot;control-label&quot;&gt;验证码：&lt;/label&gt;
            &lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;span-6&quot;&gt;
                    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;validnum&quot; datatype=&quot;*&quot; ajaxurl=&quot;http://host.refined-x.com/test/validRand.php&quot; sucmsg=&quot;验证码正确！&quot; nullmsg=&quot;请输入验证码！&quot; errormsg=&quot;验证码错误!&quot;&gt;
                &lt;/div&gt;
                &lt;div class=&quot;span-6&quot;&gt;
                    &lt;img src=&quot;http://temp.im/80x30/?text=8888&quot; style=&quot;vertical-align: middle;&quot;&gt; 看不清？&lt;a href=&quot;###&quot;&gt;换一张&lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;help-block&quot;&gt;
            &lt;label class=&quot;checkbox&quot;&gt; 同意用户协议&lt;input type=&quot;checkbox&quot; name=&quot;agree&quot; datatype=&quot;*&quot; nullmsg=&quot;请阅读并同意用户协议&quot;&gt;&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;注册&lt;/button&gt;
        &lt;/div&gt;
    &lt;/form&gt;
                        </code>
                    </pre>
                <pre> 
                    <code>
          //js
          require('validform');
          var loginForm = $('#reg_form').Validform({
              ajaxPost:true,
              url: 'http://host.refined-x.com/test/ajax.php',
              usePlugin:{             //密码强度插件，不需要就删掉
                passwordstrength:{
                  minLen:6,     //设置密码长度最小值，默认为0;
                  maxLen:16,    //设置密码长度最大值，默认为30;
                  trigger:function(obj,error){            
                    if(error){
                      obj.parent().find(".Validform_checktip").show();
                      obj.parent().find(".passwordStrength").hide();
                    }else{
                      obj.parent().find(".Validform_checktip").hide();
                      obj.parent().find(".passwordStrength").show();  
                    }
                  }
                }
              },
              callback:function(res){
                
              }
            });
                                    </code>
                </pre>
            </dd>
            <dt id="Video(跨平台视频播放)">video</dt>
            <dd>
                <h5>描述</h5>
                <p>集成video-js实现的跨平台视频播放插件，支持HTML5视频的跨平台播放，详见<a href="https://github.com/videojs/video.js" target="_blank">项目主页</a></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>controls</th>
                            <td>是否有控件</td>
                        </tr>
                        <tr>
                            <th>autoplay</th>
                            <td>是否自动播放</td>
                        </tr>
                        <tr>
                            <th>preload</th>
                            <td>预加载，可选'auto','metadata','no'，分别是自动，仅加载视频信息数据，不加载</td>
                        </tr>
                        <tr>
                            <th>poster</th>
                            <td>封面图片</td>
                        </tr>
                        <tr>
                            <th>loop</th>
                            <td>默认false，是否循环播放</td>
                        </tr>
                        <tr>
                        </tr>
                        <tr>
                            <th>width</th>
                            <td>播放器宽度</td>
                        </tr>
                        <tr>
                            <th>height</th>
                            <td>播放器高度</td>
                        </tr>
                        <tr>
                            <th>其他</th>
                            <td>见<a href="https://github.com/videojs/video.js/blob/stable/docs/index.md" target="_blank">官方文档</a></td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;video id="really-cool-video" class="video-js vjs-default-skin"&gt;
            &lt;source src="http://static.refined-x.com/sample.mp4" type='video/mp4'&gt;
            &lt;p class="vjs-no-js"&gt;不支持js的浏览器会看到这个&lt;/p&gt;
          &lt;/video&gt;
                                    </code>
                </pre>
                <pre> <code>
          require('video');
          var player = videojs('really-cool-video', {
            width: 640,
            height: 264,
            poster: seajs.root + '/web/img/apple-touch-icon.png',
            controls:true,
            autoplay:true,
            preload:'auto'
          });
                                    </code>
                </pre>
            </dd>
            <dt id="Album(相册)">album</dt>
            <dd>
                <h5>描述</h5>
                <p>相册插件，依赖幻灯片模块(slide.js)。返回<code>Album</code>方法，语法：<code>Album(config)</code>，或者使用jquery插件语法：<code>$el.album(config)</code></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>blankclose</th>
                            <td>默认false，点空白关闭</td>
                        </tr>
                        <tr>
                            <th>title</th>
                            <td>默认null，匹配的元素文字将作为标题显示</td>
                        </tr>
                        <tr>
                            <th>cell</th>
                            <td>默认'li'，相册展示的元素</td>
                        </tr>
                        <tr>
                            <th>trigger</th>
                            <td>默认等于cell，触发相册的元素，可传入cell的子元素选择器</td>
                        </tr>
                        <tr>
                            <th>hook</th>
                            <td>默认空字符串，用于附加自定义样式</td>
                        </tr>
                        <tr>
                            <th>effect</th>
                            <td>切换效果，可选 slide | fade | toggle</td>
                        </tr>
                        <tr>
                            <th>animate</th>
                            <td>动画曲线，默认“swing”</td>
                        </tr>
                        <tr>
                            <th>duration</th>
                            <td>效果时长，单位ms，默认480</td>
                        </tr>
                        <tr>
                            <th>prevHtml</th>
                            <td>左箭头html</td>
                        </tr>
                        <tr>
                            <th>nextHtml</th>
                            <td>右箭头html</td>
                        </tr>
                        <tr>
                            <th>lazyload</th>
                            <td>默认<code>true</code>，图片是否应用懒加载，基于DOM创建需手动给图片增加<code>slide-src</code>属性存储图片地址,基于数据创建将自动处理</td>
                        </tr>
                        <tr>
                            <th>onSlide</th>
                            <td>回调，参数同slide.js</td>
                        </tr>
                        <tr>
                            <th>onReady</th>
                            <td>扩展，参数同slide.js</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
                  &lt;style&gt;
                  .demo{overflow: hidden;padding:1em;}
                  .demo li{float: left;width: 240px;height: 150px;overflow: hidden;margin:0 .5em;}
                  &lt;/style&gt;
                  &lt;div class="demo"&gt;
                      &lt;ul&gt;
                          &lt;li class="show"&gt;
                              &lt;img src="http://temp.im/640x320/?1" &gt;
                              &lt;div class="_title"&gt;1这行字会成为标题&lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="show"&gt;
                              &lt;img src="http://temp.im/640x320/?1" &gt;
                              &lt;div class="_title"&gt;2这行字会成为标题&lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="show"&gt;
                              &lt;img src="http://temp.im/640x320/?3" &gt;
                              &lt;div class="_title"&gt;3这行字会成为标题&lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li class="show"&gt;
                              &lt;img src="http://temp.im/640x320/?4" &gt;
                              &lt;div class="_title"&gt;4这行字会成为标题&lt;/div&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;img src="http://temp.im/640x320/?5" &gt;
                              &lt;div class="_title"&gt;这个li不会在相册中显示&lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                                        </code>
                </pre>
                <pre> <code>
                  require.async('album',function(){
                     $('.demo').album({
                        title: '._title',
                        cell: '.show'
                     })
                  })
                                        </code>
                </pre>
            </dd>
            <dt id="Autocomplete(自动补全)">autocomplete</dt>
            <dd>
                <h5>描述</h5>
                <p>自动补全插件，移植自<a href="https://github.com/devbridge/jQuery-Autocomplete" target="_blank">jquery.autocomplete</a></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>serviceUrl</th>
                            <td>远程请求地址，返回数据格式：
                                <pre> <code>
        //格式一，有附加数据
        {
            "suggestions": [
                { "value": "United Arab Emirates", "data": "AE" },
                { "value": "United Kingdom",       "data": "UK" },
                { "value": "United States",        "data": "US" }
            ]
        }
        //格式二，无附加数据
        {
            "query": "Unit",
            "suggestions": ["United Arab Emirates", "United Kingdom", "United States"]
        }
                                                </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>suggestionsKey</th>
                            <td>远程数据字段名称，默认'suggestions'</td>
                        </tr>
                        <tr>
                            <th>lookup</th>
                            <td>本地查找数据，数据格式见示例。</td>
                        </tr>
                        <tr>
                            <th>onSelect</th>
                            <td>选中匹配项回调方法，接收选中的数据对象为参数。</td>
                        </tr>
                    </tbody>
                </table>
                <p>完整API见<a href="https://github.com/devbridge/jQuery-Autocomplete#api" target="_blank">官方文档</a></p>
                <h5>示例</h5>
                <pre> <code>
          &lt;!-- html --&gt;
          &lt;form&gt;
              &lt;input type="text" name="country" id="autocomplete-ajax" /&gt;
              &lt;button type="submit"&gt;search&lt;/button&gt;
          &lt;/form&gt;
                                        </code>
                </pre>
                <pre> <code>
            // js
            var countriesArray = [{"value":"Andorra","data":"AD"},{"value":"United Arab Emirates","data":"AE"},{"value":"Afghanistan","data":"AF"},{"value":"Antigua and Barbuda","data":"AG"},{"value":"Anguilla","data":"AI"},{"value":"Albania","data":"AL"},{"value":"Armenia","data":"AM"},{"value":"Netherlands Antilles","data":"AN"},{"value":"Angola","data":"AO"},{"value":"Antarctica","data":"AQ"},{"value":"Argentina","data":"AR"},{"value":"American Samoa","data":"AS"},{"value":"Austria","data":"AT"},{"value":"Australia","data":"AU"},{"value":"Aruba","data":"AW"},{"value":"Åland Islands","data":"AX"},{"value":"Azerbaijan","data":"AZ"},{"value":"Bosnia and Herzegovina","data":"BA"},{"value":"Barbados","data":"BB"},{"value":"Bangladesh","data":"BD"},{"value":"Belgium","data":"BE"},{"value":"Burkina Faso","data":"BF"},{"value":"Bulgaria","data":"BG"},{"value":"Bahrain","data":"BH"},{"value":"Burundi","data":"BI"},{"value":"Benin","data":"BJ"},{"value":"Saint Barthélemy","data":"BL"},{"value":"Bermuda","data":"BM"},{"value":"Brunei","data":"BN"},{"value":"Bolivia","data":"BO"},{"value":"British Antarctic Territory","data":"BQ"},{"value":"Brazil","data":"BR"},{"value":"Bahamas","data":"BS"},{"value":"Bhutan","data":"BT"},{"value":"Bouvet Island","data":"BV"},{"value":"Botswana","data":"BW"},{"value":"Belarus","data":"BY"},{"value":"Belize","data":"BZ"},{"value":"Canada","data":"CA"},{"value":"Cocos [Keeling] Islands","data":"CC"},{"value":"Congo - Kinshasa","data":"CD"},{"value":"Central African Republic","data":"CF"},{"value":"Congo - Brazzaville","data":"CG"},{"value":"Switzerland","data":"CH"},{"value":"Côte d’Ivoire","data":"CI"},{"value":"Cook Islands","data":"CK"},{"value":"Chile","data":"CL"},{"value":"Cameroon","data":"CM"},{"value":"China","data":"CN"},{"value":"Colombia","data":"CO"},{"value":"Costa Rica","data":"CR"},{"value":"Serbia and Montenegro","data":"CS"},{"value":"Canton and Enderbury Islands","data":"CT"},{"value":"Cuba","data":"CU"},{"value":"Cape Verde","data":"CV"},{"value":"Christmas Island","data":"CX"},{"value":"Cyprus","data":"CY"},{"value":"Czech Republic","data":"CZ"},{"value":"East Germany","data":"DD"},{"value":"Germany","data":"DE"},{"value":"Djibouti","data":"DJ"},{"value":"Denmark","data":"DK"},{"value":"Dominica","data":"DM"},{"value":"Dominican Republic","data":"DO"},{"value":"Algeria","data":"DZ"},{"value":"Ecuador","data":"EC"},{"value":"Estonia","data":"EE"},{"value":"Egypt","data":"EG"},{"value":"Western Sahara","data":"EH"},{"value":"Eritrea","data":"ER"},{"value":"Spain","data":"ES"},{"value":"Ethiopia","data":"ET"}];

            require('autocomplete')
            $('#autocomplete-ajax').autocomplete({
                  lookup: countriesArray,                    //本地查找数据
                  onSelect: function(data){
                    console.log(data);
                  }
            });
                                    </code>
                </pre>
            </dd>
            <dt id="Badge(徽标)">badge</dt>
            <dd>
                <h5>描述</h5>
                <p>主要用于通知未读数的角标，提醒用户点击。返回 <code>Badge</code>方法，语法： <code>Badge(config)</code>，或使用jquery插件语法： <code>$el.badge(config)</code></p>
                <h5>配置</h5>
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>默认 <code>null</code>，要显示徽标的元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>count</th>
                            <td>
                                <p>默认 <code>0</code>，初始徽标数量</p>
                            </td>
                        </tr>
                        <tr>
                            <th>slot</th>
                            <td>
                                <p>默认 <code>true</code>，是否将当前元素作为徽标显示元素，若为false将在el元素中插入独立徽标</p>
                            </td>
                        </tr>
                        <tr>
                            <th>color</th>
                            <td>
                                <p>默认 <code>'danger'</code>，徽标色调，支持【色彩】组件中的所有颜色</p>
                            </td>
                        </tr>
                        <tr>
                            <th>max</th>
                            <td>
                                <p>默认 <code>99</code>，徽标显示的最大值</p>
                            </td>
                        </tr>
                        <tr>
                            <th>dot</th>
                            <td>
                                <p>默认 <code>false</code>，是否以圆点形式显示</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <th>count([value])</th>
                            <td>
                                <p>设置/获取当前实例的徽标数</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="wrap"&gt;
                &lt;div class="m"&gt;
                    &lt;a href="###" class="btn btn-default demo"&gt;Button&lt;/a&gt;
                    &lt;div class="btn btn-primary setmax m-l"&gt;设置为100&lt;/div&gt;
                    &lt;div class="btn btn-primary add m-l"&gt;+&lt;/div&gt;
                    &lt;div class="btn btn-primary min m-l"&gt;-&lt;/div&gt;
                    &lt;div class="btn btn-primary setmin m-l"&gt;设置为0&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="p"&gt;独立显示：&lt;span class="demo2 m-l"&gt;&lt;/span&gt;
                    &lt;div class="btn btn-primary setmax2 m-l"&gt;设置为100&lt;/div&gt;
                    &lt;div class="btn btn-primary add2 m-l"&gt;+&lt;/div&gt;
                    &lt;div class="btn btn-primary min2 m-l"&gt;-&lt;/div&gt;
                    &lt;div class="btn btn-primary setmin2 m-l"&gt;设置为0&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
                                        </code>
                </pre>
                <pre> <code>
            require('badge');
            var badge1 = $('.demo').badge({
                count: 1
            });
            $('.setmax').on('click', function() {
                badge1.count(100);
            });
            $('.setmin').on('click', function() {
                badge1.count(0);
            });
            $('.add').on('click', function() {
                badge1.count(badge1.count() + 1);
            });
            $('.min').on('click', function() {
                badge1.count(badge1.count() - 1);
            });

            var badge2 = $('.demo2').badge({
                slot: false,
                count: 9,
                color: 'success'
            });
            $('.setmax2').on('click', function() {
                badge2.count(100);
            });
            $('.setmin2').on('click', function() {
                badge2.count(0);
            });
            $('.add2').on('click', function() {
                badge2.count(badge2.count() + 1);
            });
            $('.min2').on('click', function() {
                badge2.count(badge2.count() - 1);
            });
                                        </code>
                </pre>
            </dd>
            <dt id="Base(工具包)">base</dt>
            <dd>
                <h5>描述</h5>
                <p>封装常用工具</p>
                <h5>返回方法</h5>
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <td>getUID()</td>
                            <td>返回一个递增数字</td>
                        </tr>
                        <tr>
                            <td>getUUID([length])</td>
                            <td>返回一个随机数字字母组合，接收长度参数，不传默认6位</td>
                        </tr>
                        <tr>
                            <td>isEqual(Object,Object)</td>
                            <td>返回布尔值，判断两个对象是否相同</td>
                        </tr>
                        <tr>
                            <td>deepcopy(source)</td>
                            <td>多维数组/对象数组深拷贝</td>
                        </tr>
                        <tr>
                            <td>getStyle(ele,attr)</td>
                            <td>获取元素的属性值，ele：元素；attr：要获取的属性，返回属性值</td>
                        </tr>
                        <tr>
                            <td>$.cookie(name,value)</td>
                            <td>操作cookie，name：键名；value：设置为的值，一个参数取值，返回value，两个参数赋值，无返回值</td>
                        </tr>
                        <tr>
                            <td>ajaxSetup($)</td>
                            <td>
                                <p>$.ajax增强，对请求的json数据做如下格式要求：</p>
                                <pre> <code>
        {
          status: "Y/N",   //必须，代表操作是否成功
          data: "...",     //请求返回的数据
          msg: "..."       //操作提示信息
        }
                                            </code>
                                </pre>
                                <ol>
                                    <li>默认超时时间配置，见seajs.config.js文件：
                                        <code>
        seajs.set = {
          util: {
            timeout: 1.5e4
          }
        };
                                              </code>
                                    </li>
                                    <li>默认<code>dataType</code>为<code>"json"</code>；</li>
                                    <li>支持数据本地缓存，需浏览器支持localStorage，<code>localCache</code>参数传入数字将作为超时时间(毫秒数)；传入'snapshoot'字符串将开启快照缓存；传入0或任意假值将清除该缓存；示例
                                        <pre> <code>
        var $ = require('jquery');
        var base = require('base');
        base.ajaxSetup($);
        $.ajax({
          url: api.getxxx,
          localCache: 1e5,                  //缓存100s
          success:function(res, err){
            
          }
        })
                                                    </code>
                                        </pre>
                                    </li>
                                    <li><code>error</code>回调默认处理，根据ajax的四种错误原因使用box插件弹出提示</li>
                                </ol>
                            </td>
                        </tr>
                        <tr>
                            <td>browser</td>
                            <td>
                                <p>获取浏览器信息：</p>
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <th>isMobile()</th>
                                            <td>[boolean]是否移动设备 </td>
                                        </tr>
                                        <tr>
                                            <th>ie()</th>
                                            <td>[number]返回ie版本，ie11及以上和非ie返回0</td>
                                        </tr>
                                        <tr>
                                            <th>platform()</th>
                                            <td>[string]浏览器运行平台</td>
                                        </tr>
                                        <tr>
                                            <th>agent()</th>
                                            <td>[string]浏览器用户代理头信息</td>
                                        </tr>
                                        <tr>
                                            <th>support3d()</th>
                                            <td>[boolean]是否支持3d转换</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <p> </p>
                            </td>
                        </tr>
                        <tr>
                            <td>url</td>
                            <td>
                                <p>url操作方法</p>
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <th>get(name, [url])</th>
                                            <td>
                                                <pre> <code>
          /*
          * @name：要获取的参数名
          * @url：要检索的url，可选，默认检索当前窗口url
          */

          // 当前url
          http://localhost:8001/web/pro-list.htm?cat_id=2643

          // js
          console.log(base.url.get('cat_id'));  // 输出 2643
          console.log(base.url.get('cat_id','http://a.b.c?cat_id=wakaka'));  // 输出 wakaka
                                                        </code>
                                                </pre>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th>set(name, val, [url])</th>
                                            <td>
                                                <pre> <code>
          console.log(base.url.set('cat_id','test', 'http://a.b.c?cat_id=wakaka'));  
          // 输出 'http://a.b.c?cat_id=test'
                                                             </code>
                                                </pre>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <p> </p>
                            </td>
                        </tr>
                        <tr>
                            <td>throttle(fn, [delay], [duration])</td>
                            <td>
                                <p>函数节流，用于过滤resize，mousemove，scroll这类频连续繁触发事件</p>
                                <pre> <code>
          /*
          * @fn(function)：要节流执行的函数
          * @delay(number): 隔内连续触发的事件将被屏蔽，可选，默认64，单位ms
          * @duration(number): 间隔内至少执行一次事件，可选，默认640，单位ms
          * return(function)：新的节流函数，可直接在密集事件中执行
          */

          // 查看控制台，IE效果更明显
          var thro = base.throttle(function(){
                console.log('thro resize')
              });

          $(window).on('resize',thro);
                                                </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>getScript(file, [callabck], [option])</td>
                            <td>
                                <p>加载未模块化的普通js文件，可控制jquery依赖、指定css依赖、添加回调，支持批量加载及批量线性依赖加载。</p>
                                <pre> <code>
          /*
          * @file:(string/array) 加载的js路径，规则与require/require.async方法相同
          * @callabck(function): 加载完成的回调，接收加载的js文本和返回状态，批量加载只返回最后一个js文本
          * @option(object): 若callback是object格式将被作为option使用
          * @option.css(boolean/string/array): 是否依赖css，默认false，<br>传入true将加载与js同名同级css文件
          * @option.beforeLoad(function): 加载前回调
          * @option.rely(boolen): 批量加载的js是否保持线性顺序，默认false，将同时请求
          */
          //利用线性加载特定版本jquery的例子
          base.getScript(['http://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js', 'http://host.refined-x.com/test/test2'], function(data) {
              var $ = window.jQuery;
              $.fn.test2();
              }, {
              rely: true
            });
          //也可以写成base.getScript(file, callabck)快捷方式，百度地图示例：
          base.getScript('http://api.map.baidu.com/getscript?v=2.0&amp;ak=D1DX6yGc5HGh28jtaAwNzcBi', function() {
            var theBody = document.getElementsByTagName('body')[0];
            theBody.style.height='600px';
            theBody.setAttribute('id','content');
            var map = new BMap.Map("content");
            var point = new BMap.Point(116.404, 39.915);
            map.centerAndZoom(point, 15);
            window.setTimeout(function() {
              map.panTo(new BMap.Point(116.409, 39.918));
            }, 2000);
          })
                                            </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>ajaxCombo(config)</td>
                            <td>
                                <p>扩展jQuery.ajax方法，使支持请求合并，设置<code>combo:true</code>ajax会被合并，集中以<code>post</code>方式发送到指定url，示例：</p>
                                <pre> <code>
          /*
          * ajaxCombo(option);
          * option.comboUrl[string]: 合并请求的发送地址，默认"/test/combo.php"
          * option.comboDataKey[string]: 发送合并数据的key，默认"paramArray"
          * option.extendData[object]: 合并请求的附加参数，将与option.comboDataKey平级，默认{}
          * option.duration[number]: 合并等待时间，单位ms，该时间段内连续发起的请求会被合并，默认16
          * option.everytimeout[number]: 单个请求超时时间，单位ms，默认2000，合并请求达到总超时时间后会终止，并将原ajax重新发起。
          */
            var base = require('base');
            base.ajaxCombo({
                comboUrl:"http://host.refined-x.com/test/combo.php"      //设置合并请求发送地址
            });

            $.ajax({
                url:"/getxxx/",
                combo:true,                     //触发合并
                success:function(){
                    //do something
                }
            })

          //发送数据格式，数据以"combo1、combo2..."的规则组织：
          {
            "paramArray": {
              "combo1": {
                "url": "",
                "data": ""
              },
              "combo2": {
                "url": "",
                "data": ""
              }
            }
          }
          //返回数据格式，数据按原paramArray的结构返回：
          {
            "combo1": {
              "data": "返回数据"
            },
            "combo2": {
              "data": "返回数据"
            }
          }

                                                </code>
                                </pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </dd>
            <dt id="Bdshare(百度分享)">bdshare</dt>
            <dd>
                <h5>描述</h5>
                <p>封装百度分享，扩展分享按钮html自定义能力，接收通用设置和share设置，都是标准的百度分享参数格式，获取HTML代码请点<a href="http://share.baidu.com/code" target="_blank">这里</a>。</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>commonConfig</th>
                            <td>通用设置，可选，提供onBeforeClick接口用于点击分享按钮时动态更改配置，详见<a href="http://share.baidu.com/code/advance#config-common" target="_blank">通用设置</a>。</td>
                        </tr>
                        <tr>
                            <th>shareConfig</th>
                            <td>share设置，可选，允许对多组分享通过data-tag标记做不同的配置，当只有一组分享时可以直接传入json格式，不传参将使用百度默认值，详见<a href="http://share.baidu.com/code/advance#config-share" target="_blank">分享按钮设置</a>。</td>
                        </tr>
                    </tbody>
                </table>
                <h5>注意</h5>
                <ol>
                    <li>全站的百度分享代码必须commonjs中通过一次require.async集中配置，多次配置只有最后一次会生效；</li>
                    <li>分享按钮a标签HTML自定义，最多只允许增加一层DOM，否则点击事件不生效。</li>
                </ol>
                <h5>示例</h5>
                <pre> <code>
           &lt;!-- 如果页面内有多组分享 --&gt;
           &lt;div class="bdsharebuttonbox" data-tag="share_1" data-sharetitle="自定义分享标题"&gt;
              &lt;a class="bds_mshare" data-cmd="mshare"&gt;&lt;/a&gt;
              &lt;a class="bds_qzone" data-cmd="qzone" href="#"&gt;&lt;/a&gt;
              &lt;a class="bds_tsina" data-cmd="tsina"&gt;&lt;/a&gt;
              &lt;a class="bds_baidu" data-cmd="baidu"&gt;&lt;/a&gt;
              &lt;a class="bds_renren" data-cmd="renren"&gt;&lt;/a&gt;
              &lt;a class="bds_tqq" data-cmd="tqq"&gt;&lt;/a&gt;
              &lt;a class="bds_more" data-cmd="more"&gt;更多&lt;/a&gt;
              &lt;a class="bds_count" data-cmd="count"&gt;&lt;/a&gt;
           &lt;/div&gt;
           &lt;div class="bdsharebuttonbox" data-tag="share_2"&gt;
              &lt;a class="bds_mshare" data-cmd="mshare"&gt;&lt;/a&gt;
              &lt;a class="bds_qzone" data-cmd="qzone" href="#"&gt;&lt;/a&gt;
              &lt;a class="bds_tsina" data-cmd="tsina"&gt;&lt;/a&gt;
              &lt;a class="bds_baidu" data-cmd="baidu"&gt;&lt;/a&gt;
              &lt;a class="bds_renren" data-cmd="renren"&gt;&lt;/a&gt;
              &lt;a class="bds_tqq" data-cmd="tqq"&gt;&lt;/a&gt;
              &lt;a class="bds_more" data-cmd="more"&gt;更多&lt;/a&gt;
              &lt;a class="bds_count" data-cmd="count"&gt;&lt;/a&gt;
           &lt;/div&gt;
                                      </code>
                </pre>
                <pre> <code>
           //多组分享js         
           require.async('bdshare',function(bdshare){
               bdshare({
                //如果不需要从页面获取分享内容不要加onBeforeClick这一段
                onBeforeClick: function(cmd, config) {
                  var e = (arguments.callee.caller.arguments[0] || window.event).event;
                  config.bdText = $(e.target).parents('.bdsharebuttonbox').data('sharetitle');
                  //更改标题，所取的值若为undefined将默认使用页面title
                  config.bdDesc = 'shareTo ' + cmd;
                  //cmd是分享目标id，例如人人的id是"renren"，可以用来识别具体分享到哪里
                  config.bdPic = 'http://temp.im/100x100/';
                  //更改分享信息的缩略图
                  config.bdUrl = window.location.href + '?shareTo=' + cmd;
                  //更改分享信息的url

                  return config; //返回新的config
                }
               },[{
                    tag : 'share_1',  
                    bdSize : 16,      //图标尺寸, 16｜24｜32
                    bdStyle : '1'     //图标类型, 0｜1｜2

                 },
                 {
                    tag : 'share_2',
                    bdSize : 32,
                    bdStyle: 2
                 }])
           });
                                       </code>
                </pre>
            </dd>
            <dt id="Box(弹窗)">box</dt>
            <dd>
                <h5>描述</h5>
                <p>弹窗插件，具有弹出任意内容、提醒、消息、询问、ajax、图片模式。</p>
                <p>返回<code>Box</code>方法，语法：<code>Box.open(params...)</code>，或者使用jquery插件语法：<code>$.box(params...)</code></p>
                <h5>方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>Box.open(anything, [config])</th>
                            <td>
                                <p>打开弹窗</p>
                            </td>
                        </tr>
                        <tr>
                            <th>Box.hide([boxid])</th>
                            <td>
                                <p>关闭弹窗，接收弹窗id为参数，无参数将关闭页面上所有弹窗</p>
                            </td>
                        </tr>
                        <tr>
                            <th>Box.setSize(boxid,[config])</th>
                            <td>
                                <p>box尺寸重设，接收弹窗id和尺寸配置为参数，无配置时将重计算指定弹窗的尺寸</p>
                            </td>
                        </tr>
                        <tr>
                            <th>Box.alert()</th>
                            <td>
                                <p>提醒弹窗，弹出短信息，有一个确认按钮</p>
                                <pre> <code>
          /*
          * @param.message[string]:消息内容
          * @param.callback[function]:确认按钮的回调
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.alert( message, [callback], [options] );
                                                </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>Box.msg()</th>
                            <td>
                                <p>消息弹窗，在屏幕顶部显示一条全局消息，特有一个color配置用来定义消息请景色，可选"info，primary，success，warning，danger"</p>
                                <pre> <code>
          /*
          * @param.message[string]:消息内容
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.msg( message, [options] );
                                                </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>Box.toast()</th>
                            <td>
                                <p>消息气泡，在屏幕中部显示一条消息气泡，默认延时2s自动关闭。</p>
                                <pre> <code>
          /*
          * @param.message[string]:消息内容
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.toast( message, [options] );
                                                </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>Box.confirm()</th>
                            <td>
                                <p>确认弹窗，弹出一条确认信息，有一个确认按钮和一个取消按钮</p>
                                <pre> <code>
          /*
          * @param.message[string]:消息内容
          * @param.sureCall[function]:确认按钮的回调
          * @param.cancelCall[function]:取消按钮的回调
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.confirm( message, [sureCall], [cancelCall], [options] );
                                                </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>Box.ajax()</th>
                            <td>
                                <p>ajax弹窗，弹出ajax获得的内容</p>
                                <pre> <code>
          /*
          * @param.uri[string]:ajax地址
          * @param.params[object]:ajax参数
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.ajax( uri, [params], [options] );
                                                </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>Box.ifram()</th>
                            <td>
                                <p>弹出一个ifram窗口</p>
                                <pre> <code>
          /*
          * @param.uri[string]:ifram页面地址
          * @param.params[object]:ifram参数，包括name，width，height
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.ifram( uri, [params], [options] );
                                                </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>Box.img()</th>
                            <td>
                                <p>弹出一张图片</p>
                                <pre> <code>
          /*
          * @param.src[string]:图片地址
          * @param.options[object]:其他参数
          * @return: boxID
          */
          Box.img( src, [options] );
                                                </code>
                                </pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>top</th>
                            <td>默认无，若有值将固定弹窗据window顶部距离</td>
                        </tr>
                        <tr>
                            <th>title</th>
                            <td>默认<code>"对话框"</code>，对话框标题html</td>
                        </tr>
                        <tr>
                            <th>oktext</th>
                            <td>默认<code>"确定"</code>，确定按钮的文字</td>
                        </tr>
                        <tr>
                            <th>canceltext</th>
                            <td>默认<code>"取消"</code>，取消按钮的文字</td>
                        </tr>
                        <tr>
                            <th>shut</th>
                            <td>默认<code>"×"</code>，关闭按钮html，传入false将没有关闭按钮</td>
                        </tr>
                        <tr>
                            <th>width</th>
                            <td>默认<code>"auto"</code>，弹窗宽度</td>
                        </tr>
                        <tr>
                            <th>height</th>
                            <td>默认<code>"auto"</code>，弹窗高度</td>
                        </tr>
                        <tr>
                            <th>layout</th>
                            <td>默认<code>true</code>，是否包含边框</td>
                        </tr>
                        <tr>
                            <th>setposi</th>
                            <td>默认<code>true</code>，无layout的情况下，是否自动添加定位样式，手动定位需要设为false</td>
                        </tr>
                        <tr>
                            <th>bar</th>
                            <td>默认<code>true</code>，是否显示标题栏</td>
                        </tr>
                        <tr>
                            <th>bg</th>
                            <td>默认<code>true</code>，是否显示背景层</td>
                        </tr>
                        <tr>
                            <th>fix</th>
                            <td>默认<code>true</code>，弹窗是否框固定在页面上</td>
                        </tr>
                        <tr>
                            <th>bgclose</th>
                            <td>默认<code>true</code>，是否点击背景层关闭</td>
                        </tr>
                        <tr>
                            <th>drag</th>
                            <td>默认<code>false</code>，是否可拖拽</td>
                        </tr>
                        <tr>
                            <th>protect</th>
                            <td>默认<code>false</code>，若为true，关闭后会将弹出的元素<code>appendTo('body')</code></td>
                        </tr>
                        <tr>
                            <th>delay</th>
                            <td>默认<code>0</code>，弹窗自动关闭时间, 0和负值不触发</td>
                        </tr>
                        <tr>
                            <th>lang</th>
                            <td>默认<code>0</code>，语言选择，0：中文 1：英文</td>
                        </tr>
                        <tr>
                            <th>hook</th>
                            <td>默认无，自定义样式钩子，用于给弹窗附加class修改样式</td>
                        </tr>
                        <tr>
                            <th>color</th>
                            <td>默认"info"，Box.msg方法的情景色，使用的是ui.css提供的几种背景色，可选info，primary，success，warning，danger</td>
                        </tr>
                        <tr>
                            <th>onshow(box)</th>
                            <td>默认无，弹窗打开事件，接收弹窗DOM对象为参数</td>
                        </tr>
                        <tr>
                            <th>onclose()</th>
                            <td>默认无，弹窗关闭事件</td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>boxid</th>
                            <td>
                                <p>每次Box调用都将返回一个boxid，用于Box.hide()的参数时，可关闭本弹窗实例</p>
                                <p><code>var mybox = Box(...);</code></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;style&gt;
          button{margin:.5em;}
          .myextclass .wrap_bar{background:green;}
          &lt;/style&gt;

          &lt;!-- html --&gt;
          &lt;form class="demo hide" style="padding:20px;"&gt;
            &lt;p&gt;
              &lt;label&gt;姓名：&lt;/label&gt;&lt;input type="text"&gt;
            &lt;/p&gt;
            &lt;p&gt;
              &lt;label&gt;电话：&lt;/label&gt;&lt;input type="tel"&gt;
            &lt;/p&gt;
            &lt;p&gt;
              &lt;label&gt;邮箱：&lt;/label&gt;&lt;input type="mail"&gt;
            &lt;/p&gt;
            &lt;p class="tc" style="margin-top:1em"&gt;
              &lt;button&gt;填好了&lt;/button&gt;
            &lt;/p&gt;
          &lt;/form&gt;

          &lt;div&gt;&lt;button class="btn btn-default boxDom"&gt;弹出Dom&lt;/button&gt;&lt;/div&gt;
          &lt;div&gt;&lt;button class="btn btn-default boxMsg"&gt;提示&lt;/button&gt;&lt;/div&gt;
          &lt;div&gt;&lt;button class="btn btn-default boxAlert"&gt;警告&lt;/button&gt;&lt;/div&gt;
          &lt;div&gt;&lt;button class="btn btn-default boxConfirm"&gt;询问&lt;/button&gt;&lt;/div&gt;
          &lt;div&gt;&lt;button class="btn btn-default boxAjax"&gt;Ajax弹出内容&lt;/button&gt;&lt;/div&gt;
          &lt;div&gt;&lt;button class="btn btn-default boxIfram"&gt;弹出ifram&lt;/button&gt;&lt;/div&gt;
          &lt;div&gt;&lt;button class="btn btn-default modal"&gt;弹出一个模态自定义内容&lt;/button&gt;
          &lt;div&gt;&lt;button class="btn btn-default extclass"&gt;添加自定义class&lt;/button&gt;&lt;/div&gt;
          &lt;div&gt;&lt;button class="btn btn-default boximg"&gt;弹出图片&lt;/button&gt;&lt;/div&gt;
                              </code>
                </pre>
                <pre> <code>

            //支持全局修改默认配置，全局配置必须在require('module name')，
            //例如全局语言改为英文
            window.boxGlobal = {lang:1};

            //js
            var Box = require('box');

            $('.boxDom').on('click',function(){
              Box.open( $('.demo') );
            });
            
            $('.boxAlert').on('click',function(){
              Box.alert('hello box!',function(){
                alert('alert的回调');
              });
            });
            
            $('.boxMsg').on('click',function(){
              Box.msg('注意，这是一条测试信息！',{
                delay:3000
              });
            });

            $('.boxConfirm').on('click',function(){
              Box.confirm('hello box!', function(){
                alert('确定回调');
              }, function(){
                alert('取消回调');
              });
            });
            
            $('.boxAjax').on('click',function(){
              Box.ajax('http://host.refined-x.com/test/ajax.php', { 
                param: "param1" //Ajax参数
              });
            });
            
            $('.boxIfram').on('click',function(){
              var myifr = Box.ifram('http://host.refined-x.com/test/iframCloseTest.html',{
                name: "closeTestIfram",  //ifram name，默认空(不是弹窗标题)
                width: 320,     //iframe宽，默认640
                height: 240     //iframe高，默认480
              });
            });

            $('.modal').on('click',function(){
              Box.open('&lt;i class="ion rotation"&gt;&lt;/i&gt;',{
                layout:false,
                bgclose:false,
                delay:3e3
              });
            });

            $('.extclass').on('click',function(){
              Box.open('通过附加自定义class修改了弹窗样式',{
                hook: "text-success"
              });
            });

            $('.boximg').on('click',function(){
              var imgBox = Box.img('http://static.refined-x.com/view0.jpg',{
                onshow:function($this){
                  $this.on('click',function(){
                    Box.hide(imgBox);
                  });
                }
              });
            });

                                </code>
                </pre>
            </dd>
            <dt id="Checks(勾选控件)">Checks</dt>
            <dd>
                <h5>描述</h5>
                <p>基本组件-单/多选框。</p>
                <p>返回<code>Checks</code>方法，语法：<code>Checks(params...)</code>，或者使用jquery插件语法：<code>$.checks(params...)</code></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>默认<code>null</code>，控件生成元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>type</th>
                            <td>
                                <p>默认<code>"checkbox"</code>，切换单/多选模式，可选"radio"</p>
                            </td>
                        </tr>
                        <tr>
                            <th>name</th>
                            <td>
                                <p>默认<code>null</code>，指定该组控件的name</p>
                            </td>
                        </tr>
                        <tr>
                            <th>data</th>
                            <td>
                                <p>默认<code>null</code>，控件数据，数据格式见示例，也支持使用标签初始化，标签格式见示例</p>
                            </td>
                        </tr>
                        <tr>
                            <th>checked</th>
                            <td>
                                <p>默认<code>null</code>，已选择项的<code>value</code>值，数组格式</p>
                            </td>
                        </tr>
                        <tr>
                            <th>disabled</th>
                            <td>
                                <p>默认<code>null</code>，禁用项的<code>value</code>值，数组格式</p>
                            </td>
                        </tr>
                        <tr>
                            <th>mode</th>
                            <td>
                                <p>默认<code>"inline"</code>，将采用内联样式，可选"block"</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onChange</th>
                            <td>
                                <p>默认<code>null</code>，选项变化回调方法，@param(checked) : 已选项，"checkbox"模式返回所选项value数组，radio"模式返回所选项value)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onReady</th>
                            <td>
                                <p>默认<code>null</code>，初始化完成回调方法，@param(checked) : 已选项，"checkbox"模式返回所选项value数组，radio"模式返回所选项value)</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>checked([value])</th>
                            <td>
                                <p>获取/设置已选项，"checkbox"模式接收value数组，"radio"模式接收value</p>
                            </td>
                        </tr>
                        <tr>
                            <th>disabled([value])</th>
                            <td>
                                <p>获取/设置禁用项，接收value数组</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <pre> <code>
            &lt;div class="wrap"&gt;
                &lt;form class="form" id="testform"&gt;
                    &lt;div class="form-group demo1"&gt;
                        使用数据初始化
                    &lt;/div&gt;
                    &lt;div class="form-group demo2"&gt;
                        使用标签初始化
                        &lt;input type="radio" value="1" name="radio1" label="香蕉" checked&gt;
                        &lt;input type="radio" value="2" name="radio1" label="西瓜"&gt;
                        &lt;input type="radio" value="3" name="radio1" label="猕猴桃" disabled&gt;
                    &lt;/div&gt;
                    &lt;div class="input-group-btn"&gt;
                        &lt;div class="btn btn-default checkall"&gt;全选checkbox&lt;/div&gt;
                        &lt;div class="btn btn-default checknone"&gt;反选checkbox&lt;/div&gt;
                        &lt;div class="btn btn-default radiocheck"&gt;选中radio第二项&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;p class="form-control-static" id="log"&gt;&lt;/p&gt;
                &lt;/form&gt;
            &lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
            var checks = require('checks');
            var showLog = function(checked){
                if(checked){
                    console.log(checked);
                }
                $('#log').text($('#testform').serialize());
            };

            var mycheck = checks({
                el: $('.demo1'),
                type: 'checkbox',
                name: 'datacheck',
                data: [{
                    value: 'yingtao',
                    label: '樱桃'
                },{
                    value: 'tianhua',
                    label: '甜瓜'
                },{
                    value: 'caomei',
                    label: '草莓'
                }],
                checked: ['yingtao'],
                disabled: ['caomei'],
                onChange: showLog,
                onReady: showLog
            });

            var myradio = checks({
                el: $('.demo2'),
                type: 'radio',
                onChange: showLog,
                onReady: showLog
            });
                                        
            $('.input-group-btn').on('click', '.btn', function(){
                $(this).addClass('active').siblings('.active').removeClass('active');
                if($(this).hasClass('checkall')){
                    mycheck.checked(['yingtao','tianhua','caomei']);
                } else if($(this).hasClass('checknone')){
                    mycheck.checked([]);
                } else if($(this).hasClass('radiocheck')){
                    myradio.checked('2');
                }
            });
            
                                    </code>
                </pre>
            </dd>
            <dt id="City-select(地区选择器)">city-select</dt>
            <dd>
                <h5>描述</h5>
                <p>地区选择器插件，返回<code>citySelect</code>方法，语法<code>citySelect(config)</code>，或使用jquery插件格式<code>$el.citySelect(config)</code>。</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>触发元素，默认无，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>textKey</th>
                            <td>
                                <p>默认<code>"name"</code>，用于显示选项文字的数据属性</p>
                            </td>
                        </tr>
                        <tr>
                            <th>subKeys</th>
                            <td>
                                <p>默认<code>['city', 'area']</code>，下级数据的key序列</p>
                            </td>
                        </tr>
                        <tr>
                            <th>data</th>
                            <td>
                                <p>省市区数据，支持数组或能返回指定格式的地址字符串</p>
                                <p>格式不限(需正确匹配"textKey"和"subKeys"设置)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>readOnly</th>
                            <td>
                                <p>默认<code>true</code>，若触发元素为<code>input/textarea</code>是否禁止用户输入</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onSelect</th>
                            <td>
                                <p>选择结束回调函数，接收选择结果，格式为所选每一级数据组成的数组</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>val</th>
                            <td>
                                <p>获取/设置选择器的当前值</p>
                                <p>设置值时需要传入textKey所配置属性值，多个值之间逗号隔开</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="m" style="width:200px"&gt;
                &lt;input type="text" class="demo form-control" placeholder="选择地区"&gt;
            &lt;/div&gt;
            &lt;div class="getval btn btn-default"&gt;获取当前值&lt;/div&gt;
            &lt;div class="setval btn btn-default"&gt;赋值&lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
            require('city-select');
            var myselect = $('.demo').citySelect({
                data:[{"name":"北京","id":"001","city":[{"name":"北京","id":"001","area":[{"name":"东城区","id":"001"},{"name":"西城区","id":"002"},{"name":"崇文区","id":"003"},{"name":"宣武区","id":"004"},{"name":"朝阳区","id":"005"}]}]},{"name":"河北","id":"002","city":[{"name":"石家庄","id":"002","area":[{"id":"002","name":"长安区"},{"id":"002","name":"桥东区"},{"id":"002","name":"桥西区"},{"id":"002","name":"新华区"},{"id":"002","name":"郊  区"}]}]},{"name":"台湾","id":"003","city":[{"name":"台湾","id":"003","area":[{"id":"003","name":"台北市"},{"id":"003","name":"高雄市"},{"id":"003","name":"台北县"},{"id":"003","name":"桃园县"}]},{"name":"其他","id":"004","area":[{"name":"其他","id":"004"}]}]}],
                onSelect:function(result){
                    console.log(result);
                    var address = [];
                    $.each(result, function(i, e) {
                        address.push(e.name);
                    });
                    $(this).val(address.join(' / '));
                }
            });

            $('.getval').on('click', function(){
                console.log(myselect.val());
            });

            $('.setval').on('click', function(){
                myselect.val('北京,北京,西城区');
            });
                              </code>
                </pre>
            </dd>
            <dt id="Collapse(折叠面板)">collapse</dt>
            <dd>
                <h5>描述</h5>
                <p>将内容区域折叠/展开，支持基于标签生成和基于数据生成两种模式。返回<code>Collapse</code>方法，语法<code>Collapse(config)</code>，或使用jquery插件格式<code>$el.collapse(config)</code>。</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>插入/生成折叠面板的元素，默认无，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>conts</th>
                            <td>
                                <p>默认<code>'.panel'</code>，基于标签生成时，指定面板的元素选择器</p>
                                <p>该元素的data-card-title属性值将作为选项卡标签标题，另外还支持<code>opened</code>属性，用于指定初始展开的面板</p>
                            </td>
                        </tr>
                        <tr>
                            <th>data</th>
                            <td>
                                <p>默认<code>null</code>，用于生成实例的数据，格式：</p>
                                <code>
                                                [{<br>
                                                    title: "tab1", //面板标题<br>
                                                    cont: 'tab1cont', //面板内容<br>
                                                    opened: [boolean], //是否展开<br>
                                                    color: '', //面板颜色，支持【颜色】组件中的所有颜色<br>
                                                }]
                                            </code>
                            </td>
                        </tr>
                        <tr>
                            <th>opened</th>
                            <td>
                                <p>默认<code>[]</code>，默认打开元素，优先级高于数据和标签中的初始值</p>
                            </td>
                        </tr>
                        <tr>
                            <th>color</th>
                            <td>
                                <p>默认<code>''</code>，面板颜色，支持【Color】组件中的所有颜色</p>
                            </td>
                        </tr>
                        <tr>
                            <th>single</th>
                            <td>
                                <p>默认<code>true</code>，手风琴模式，同时只允许展开一个面板</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onChange</th>
                            <td>
                                <p>状态变化回调方法，@param(opened) : 当前展开的序号数组</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>open([indexArray])</th>
                            <td>
                                <p>设置/获取展开的折叠面板</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="wrap"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="span-6"&gt;
                        &lt;div class="demo m-tb"&gt;
                            &lt;div class="panel" data-card-title="史蒂夫·乔布斯"&gt;
                                史蒂夫·乔布斯(Steve Jobs)，1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。
                            &lt;/div&gt;
                            &lt;div class="panel" data-card-title="斯蒂夫·盖瑞·沃兹尼亚克"&gt;
                                斯蒂夫·盖瑞·沃兹尼亚克(Stephen Gary Wozniak)，美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑(今之苹果公司)。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校(UC Berkeley)并获得电机工程及计算机(EECS)本科学位(1987年)。
                            &lt;/div&gt;
                            &lt;div class="panel" data-card-title="乔纳森·伊夫"&gt;
                                乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="btn btn-default open3"&gt;打开第3个&lt;/div&gt;
                        &lt;div class="btn btn-default opennone"&gt;全部关闭&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
            require('collapse');
            var mycol = $('.demo').collapse();

            $('.open3').on('click', function(){
                mycol.open([2]);
            });
            $('.opennone').on('click', function(){
                mycol.open([]);
            });
                                    </code>
                </pre>
            </dd>
            <dt id="Countdown(倒计时)">countdown</dt>
            <dd>
                <h5>描述</h5>
                <p>倒计时插件，通过重写render方法可自定义显示格式。</p>
                <h5>注意</h5>
                <p>标准日期对象的月份设置范围是0~11，不是1~12</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>begin</th>
                            <td>开始时间，可选，默认本机时间，标准日期格式，如<code>new Date(2089,01,05,02,25,00)</code>，或<code>new Date("2089/01/05 02:25:00")</code>，或<code>new Date("2089-01-05 02:25:00")</code></td>
                        </tr>
                        <tr>
                            <th>date</th>
                            <td>结束时间，标准日期格式，默认 <code>new Date(2089,01,05,02,25,00)</code></td>
                        </tr>
                        <tr>
                            <th>refresh</th>
                            <td>刷新率，单位ms，默认1000，即按秒刷新</td>
                        </tr>
                        <tr>
                            <th>offset</th>
                            <td>偏移量，单位ms，用于纠正时区偏差</td>
                        </tr>
                        <tr>
                            <th>onEnd</th>
                            <td>倒计时结束回调函数，默认无</td>
                        </tr>
                        <tr>
                            <th>render</th>
                            <td>渲染函数，接收两个参数分别是当前DOM和日期</td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回对象</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>update(option)</th>
                            <td>
                                <p>更新倒计时参数，如果在onEnd回调中调用update方法，注意避免死循环</p>
                            </td>
                        </tr>
                        <tr>
                            <th>stop()</th>
                            <td>
                                <p>停止当前倒计时实例</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;!-- html --&gt;
          &lt;div class="demo"&gt;&lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
           //js
           var endData = new Date(),
               endMill = endData.getTime()+1000*60*60*24;
           endData.setTime(endMill);
           require.async('countdown', function() {
              $('.demo').Countdown({
                 date: endData,
                 render: function($this, date) { 
                    $this.html(date.years + " 年, " +
                       date.days + " 天, " +
                       date.hours + " 时, " +
                       date.min + " 分 " +
                       date.sec + " 秒"
                    )
                 }
              })
           })
                                    </code>
                </pre>
            </dd>
            <dt id="DatePicker(日期选择器)">DatePicker</dt>
            <dd>
                <h5>描述</h5>
                <p>日期选择器插件，基于<a href="https://github.com/fengyuanchen/datepicker" target="_blank">fengyuanchen/datepicker</a>二次开发</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>autoShow</th>
                            <td>默认<code>false</code>，初始化后立即显示日历</td>
                        </tr>
                        <tr>
                            <th>autoHide</th>
                            <td>默认<code>false</code>，选择日期后自动关闭日历</td>
                        </tr>
                        <tr>
                            <th>autoPick</th>
                            <td>默认<code>false</code>，初始化后自动选中当前日期</td>
                        </tr>
                        <tr>
                            <th>inline</th>
                            <td>默认<code>false</code>，是否以内嵌模式显示日历</td>
                        </tr>
                        <tr>
                            <th>container</th>
                            <td>元素或字符串，默认<code>null</code>，指定放置内嵌日历的元素或元素选择器</td>
                        </tr>
                        <tr>
                            <th>trigger</th>
                            <td>元素或字符串，默认<code>null</code>，指定显示日历的触发器</td>
                        </tr>
                        <tr>
                            <th>language</th>
                            <td>界面语言，默认<code>''</code>，可选'zh-CN'</td>
                        </tr>
                        <tr>
                            <th>format</th>
                            <td>
                                <p>字符串，默认<code>'yyyy/mth/dd'</code></p>
                                <p>支持的格式元素: </p>
                                <p>
                                    <code>
            year: 'yyyy','yy'<br>
            month: 'mth', 'm'<br>
            day: 'dd', 'd'<br>
            hour: 'hh'<br>
            minute: 'mm'<br>
            secend: 'ss'<br>
                                                </code>
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <th>date</th>
                            <td>日期数据或字符串，默认<code>null</code>，初始日期，不设置选择当天</td>
                        </tr>
                        <tr>
                            <th>startDate</th>
                            <td>日期数据或字符串，默认<code>null</code>，设置可选的起始日期</td>
                        </tr>
                        <tr>
                            <th>endDate</th>
                            <td>日期数据或字符串，默认<code>null</code>，设置可选的终止日期</td>
                        </tr>
                        <tr>
                            <th>startView</th>
                            <td>数值，默认<code>0</code>，设置初始化界面，可选0: days；1: months；2: years</td>
                        </tr>
                        <tr>
                            <th>weekStart</th>
                            <td>数值，默认<code>0</code>，设置每周的起始天，可选0: Sunday；1: Monday；2: Tuesday；3: Wednesday；4: Thursday；5: Friday；6: Saturday</td>
                        </tr>
                        <tr>
                            <th>yearFirst</th>
                            <td>布尔值，默认<code>false</code>，界面上将年显示到月之前</td>
                        </tr>
                        <tr>
                            <th>yearSuffix</th>
                            <td>字符型，默认<code>''</code>，年份后缀，例如可以设置为'年'</td>
                        </tr>
                        <tr>
                            <th>days</th>
                            <td>数组，默认<code>['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</code>，设置一周每天称谓</td>
                        </tr>
                        <tr>
                            <th>daysShort</th>
                            <td>数组，默认<code>['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']</code>，一周每天称谓短版</td>
                        </tr>
                        <tr>
                            <th>daysMin</th>
                            <td>数组，默认<code>['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']</code>，一周每天称谓更短</td>
                        </tr>
                        <tr>
                            <th>months</th>
                            <td>数组，默认<code>['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']</code>，月份名称</td>
                        </tr>
                        <tr>
                            <th>monthsShort</th>
                            <td>数组，默认<code>['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']</code>，月份短称谓</td>
                        </tr>
                        <tr>
                            <th>itemTag</th>
                            <td>字符串，默认<code>'li'</code>，标签名</td>
                        </tr>
                        <tr>
                            <th>mutedClass</th>
                            <td>字符串，默认<code>'muted'</code>，设定class前缀</td>
                        </tr>
                        <tr>
                            <th>pickedClass</th>
                            <td>字符串，默认<code>'picked'</code>，定义选中日期class</td>
                        </tr>
                        <tr>
                            <th>disabledClass</th>
                            <td>字符串，默认<code>'disabled'</code>，定义不可用日期class</td>
                        </tr>
                        <tr>
                            <th>offset</th>
                            <td>数值，默认<code>10</code>，日期弹出位置距离元素的距离，单位px</td>
                        </tr>
                        <tr>
                            <th>needTime</th>
                            <td>
                                <p>默认<code>false</code>，是否需要时间选择器，如果传入Object将作为该time picker实例的设置参数。</p>
                                <p><strong>注意：默认format不显示时间，需要同时修改format</strong></p>
                            </td>
                        </tr>
                        <tr>
                            <th>zIndex</th>
                            <td>数值，默认<code>1</code>，日期弹窗的z-index值</td>
                        </tr>
                        <tr>
                            <th>filter</th>
                            <td>函数，默认<code>null</code>，例如
                                <pre> <code>
        $().datepicker({
          filter: function(date) {
            if (date.getDay() === 0) {
              return false; // Disable all Sundays
            }
          }
        });
                                            </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>show</th>
                            <td>函数，默认<code>null</code>，日历显示的回调</td>
                        </tr>
                        <tr>
                            <th>hide</th>
                            <td>函数，默认<code>null</code>，日历隐藏的回调</td>
                        </tr>
                        <tr>
                            <th>pick</th>
                            <td>函数，默认<code>null</code>，选择日期的回调，函数event中date属性可以获得选中的日期</td>
                        </tr>
                    </tbody>
                </table>
                <h5>方法</h5>
                <p>见：<a href="https://github.com/fengyuanchen/datepicker/blob/v0.3.1/README.md#table-of-contents" target="_blank">官方文档</a></p>
                <h5>示例</h5>
                <pre> <code>
            &lt;p&gt; 普通 &lt;/p&gt;
            &lt;input class="datepicker"&gt;
            &lt;p&gt; 自动关闭/值选择年月 &lt;/p&gt;
            &lt;input class="datepicker2"&gt;
            &lt;p&gt; 选择时间 &lt;/p&gt;
            &lt;input class="datepicker3"&gt;
                                  </code>
                </pre>
                <pre> <code>
            require('datepicker');

            $('.datepicker').datepicker({
              language: 'zh-CN'
            });

            $('.datepicker2').datepicker({
              autoHide: true,
              format:'yyyy/mth'
            });

            $('.datepicker3').datepicker({
                needTime: true,
                format:'yyyy/mth/dd hh:mm:ss'
            }); 

                                  </code>
                </pre>
            </dd>
            <dt id="DragPanel(拖拽面板)">dragPanel</dt>
            <dd>
                <h5>描述</h5>
                <p>拖拽面板插件，配合card(卡片)组件和flex(栅格)组件实现可拖拽面板；返回<code>DragPanel</code>方法，语法：<code>DragPanel(config)</code>，或使用jquery插件语法：<code>$el.dragPanel(config)</code></p>
                <h5>注意</h5>
                <p>兼容ie10+</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>默认<code>null</code>，拖拽面板外边界，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</td>
                        </tr>
                        <tr>
                            <th>sortkey</th>
                            <td>默认<code>"data-key"</code>，拖拽元素的排序标识</td>
                        </tr>
                        <tr>
                            <th>dragable</th>
                            <td>默认<code>".dragable"</code>，可拖拽元素</td>
                        </tr>
                        <tr>
                            <th>dragline</th>
                            <td>默认<code>".flex-row"</code>，拖拽元素的行元素</td>
                        </tr>
                        <tr>
                            <th>ondrag</th>
                            <td>默认无，拖拽结束回调，返回新的排序标识数据</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="wrap" id="wrapper"&gt;
                &lt;div class="flex-row"&gt;
                    &lt;div class="flex-1 m dragable" data-key="1"&gt;
                        &lt;div class="card card-bordered"&gt;
                            &lt;div class="card-head"&gt;
                                &lt;div class="card-title"&gt; Hello Card&lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="card-body"&gt;
                                mycard1
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="flex-1 m dragable" data-key="2"&gt;
                        &lt;div class="card card-shadow"&gt;
                            &lt;div class="card-head"&gt;
                                &lt;div class="card-title"&gt; Hello Card&lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="card-body"&gt;
                                mycard2
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="flex-row"&gt;
                    &lt;div class="flex-1 m dragable" data-key="3"&gt;
                        &lt;div class="card card-bordered"&gt;
                            &lt;div class="card-head"&gt;
                                &lt;div class="card-title"&gt; Hello Card&lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="card-body"&gt;
                                mycard3
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="flex-1 m dragable" data-key="4"&gt;
                        &lt;div class="card card-shadow"&gt;
                            &lt;div class="card-head"&gt;
                                &lt;div class="card-title"&gt; Hello Card&lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="card-body"&gt;
                                mycard4
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
            require('drag-panel');
            $('#wrapper').dragPanel({
                ondrag: function(newSort) {
                    console.log(newSort);
                }
            });
                                    </code>
                </pre>
            </dd>
            <dt id="Drag(拖拽)">drag</dt>
            <dd>
                <h5>描述</h5>
                <p>拖拽插件，拖拽元素大于拖拽范围或者小于拖拽范围都可以，两种情况都支持边缘检测，返回<code>Drag</code>方法，语法：<code>Drag(config)</code>，或者使用jquery插件语法：<code>$el.drag(config);</code></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>wrap</th>
                            <td>
                                <p>默认<code>null</code>，指定拖拽范围，默认选择父元素</p>
                            </td>
                        </tr>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>默认<code>null</code>，拖拽元素</p>
                            </td>
                        </tr>
                        <tr>
                            <th>overflow</th>
                            <td>
                                <p>默认<code>false</code>，是否允许超出边缘，默认不允许</p>
                            </td>
                        </tr>
                        <tr>
                            <th>dragStart</th>
                            <td>
                                <p>默认<code>null</code>，拖拽开始回调 @param($el) : 拖拽元素</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onDrag</th>
                            <td>
                                <p>默认<code>null</code>，拖拽过程回调 @param($el) : 拖拽元素</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onMove</th>
                            <td>
                                <p>默认<code>null</code>，拖拽过程函数 @param(moveX, moveY) : 横向移动距离，纵向移动距离，<strong>将接管拖拽过程，元素位移不会发生变化</strong></p>
                            </td>
                        </tr>
                        <tr>
                            <th>dragEnd</th>
                            <td>
                                <p>默认<code>null</code>，拖拽结束回调 @param($el) : 拖拽元素</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;!--html--&gt;
          &lt;div class="drag" style="width:100px;height:100px;background:#434343;"&gt;&lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
          //js
          require('drag');
          $('.drag').drag({
            dragStart:function($this){
              console.log(1)
            },
            dragEnd:function($this){
              console.log(2)
            }
          });
                                </code>
                </pre>
            </dd>
            <dt id="Dropdown(下拉菜单)">Dropdown</dt>
            <dd>
                <h5>描述</h5>
                <p>下拉菜单插件，继承<a href="#Tip(提示框)" title="#Tip(提示框)">【tip】</a>插件配置和方法，返回<code>Dropdown</code>方法，语法：<code>Dropdown(config)</code>，或者使用jquery插件语法：<code>$el.dropdown(config);</code></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>默认<code>null</code>，制定触发元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</td>
                        </tr>
                        <tr>
                            <th>trigger</th>
                            <td>默认<code>"hover"</code>，触发动作 hover | click | custom</td>
                        </tr>
                        <tr>
                            <th>place</th>
                            <td>默认<code>"bottom-center"</code></td>
                        </tr>
                        <tr>
                            <th>items</th>
                            <td>默认<code>[]</code>，下拉数据，必须，每一项必须是包含<code>item</code>属性的对象，此外可添加自定义属性，对象将在<code>onclick</code>回调中接收</td>
                        </tr>
                        <tr>
                            <th>width</th>
                            <td>默认无，可设置菜单最小宽度</td>
                        </tr>
                        <tr>
                            <th>theme</th>
                            <td>默认<code>"dropdown-default"</code>，通过该hook可自定义下拉菜单皮肤</td>
                        </tr>
                        <tr>
                            <th>onclick</th>
                            <td>默认无，点击菜单项回调方法。@param(item, isCurrent) : 对应的items数据项，是否为当前已选项</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="wrap"&gt;
                &lt;div id="demo1" class="btn btn-success"&gt;菜单1&lt;/div&gt; &lt;div id="demo2" class="btn btn-warning"&gt;菜单2&lt;/div&gt; 
            &lt;/div&gt; 
                                    </code>
                </pre>
                <pre> <code>
            var Dropdown = require('dropdown');
            Dropdown({
                el: '#demo1',
                items: [{
                    item: '个人设置',
                    data: 'demo1'
                }, {
                    item: '数据统计',
                    data: 'demo1'
                }, {
                    item: '立即更新',
                    data: 'demo1'
                }],
                onclick: function(item){
                    console.log(item);
                }
            });

            $('#demo2').dropdown({
                items: [{
                    item: '个人设置',
                    data: 'demo2'
                }, {
                    item: '数据统计',
                    data: 'demo2'
                }, {
                    item: '立即更新',
                    data: 'demo2'
                }],
                onclick: function(item){
                    console.log(item);
                }
            });
                                    </code>
                </pre>
            </dd>
            <dt id="Easing(animate动画扩展)">easing</dt>
            <dd>
                <h5>描述</h5>
                <p>扩展jquery.animate动画效果，来自<a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jquery.easing.js</a>，被<code>scroll-col</code>和<code>scroll-row</code>插件依赖</p>
                <p>效果包括：linear, swing, jswing, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine, easeInExpo,
                    easeOutExpo, easeInOutExpo, easeInCirc, easeInOutCirc, easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeInOutBack, easeInBounce, easeOutBounce, easeInOutBounce</p>
                <h5>示例</h5>
                <pre> <code>
          require('easing');

          $(element).slideUp({
            duration: 1000, 
            easing: method, 
            complete: callback
          });

          $(element).animate({
            height:100
          },{
            duration: 1000, 
            easing: method, 
            complete: callback
          });
                                    </code>
                </pre>
            </dd>
            <dt id="Echarts(百度Echarts)">Echarts</dt>
            <dd>
                <h5>描述</h5>
                <p>封装百度Echarts 3.0，包含类型：柱状图、饼状图、折线图、散点图、雷达图、热力图、地图、仪表盘、象形柱图；包含组件：标题、图例、提示框</p>
                <p>详细用法见<a href="http://echarts.baidu.com/tutorial.html" target="_blank">官方文档</a></p>
                <h5>兼容性</h5>
                <p>IE9+</p>
                <h5>示例</h5>
                <pre> <code>
          &lt;div id="main" style="width: 600px;height:400px;"&gt;&lt;/div&gt;
                                 </code>
                </pre>
                <pre> <code>
          var echarts = require('echarts');
          // 基于准备好的DOM，初始化echarts实例
          var myChart = echarts.init(document.getElementById('main'));

          // 指定图表的配置项和数据
          var option = {
              title: {
                  text: 'ECharts 入门示例'
              },
              tooltip: {},
              legend: {
                  data:['销量']
              },
              xAxis: {
                  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
              },
              yAxis: {},
              series: [{
                  name: '销量',
                  type: 'bar',
                  data: [5, 20, 36, 10, 10, 20]
              }]
          };

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option);
                                 </code>
                </pre>
            </dd>
            <dt id="Etpl(模板引擎)">etpl</dt>
            <dd>
                <h5>描述</h5>
                <p>模板引擎，用于相对大量的视图渲染，文档详见<a href="https://github.com/ecomfe/etpl" target="_blank">项目主页</a></p>
                <p>对于动态数据渲染场景，推荐基于etpl的渲染器<a href="#Render(渲染器)">Render</a></p>
                <h5>内置过滤器</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>html</th>
                            <td>默认过滤器，html转义</td>
                        </tr>
                        <tr>
                            <th>url</th>
                            <td>url转义</td>
                        </tr>
                        <tr>
                            <th>raw</th>
                            <td>不进行任何转义</td>
                        </tr>
                        <tr>
                            <th>date</th>
                            <td>日期过滤，可选参数<code>outFormat</code>(默认'YYYY-MM-DD'), <code>inFormat</code>(默认'YYYY年MM月DD日')</td>
                        </tr>
                        <tr>
                            <th>dec</th>
                            <td>数字过滤，可选参数<code>format</code>(默认'#,###.00')</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;!-- html --&gt;
          &lt;div class="demo"&gt;&lt;/div&gt;
                                  </code>
                </pre>
                <pre> <code>
          var etpl=require('etpl');
          var render = etpl.compile('Hello ${name}!');
          var text = render({ name: 'etpl' });
          $('.demo').html(text);
                                  </code>
                </pre>
            </dd>
            <dt id="Img-loaded(图片加载检测)">img-loaded</dt>
            <dd>
                <h5>描述</h5>
                <p>对目标区域内图片做加载完成检测</p>
                <h5>示例</h5>
                <pre> <code>
          &lt;!--html--&gt;
          &lt;div class="demo"&gt;
             &lt;ul&gt;
                &lt;li&gt;&lt;img src="http://lorempixel.com/442/548/?582" &gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="http://lorempixel.com/405/406/?324" &gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="http://lorempixel.com/374/330/?734" &gt;&lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
          //js
          require('img-loaded');
          $('.demo').imagesLoaded(function(){
             alert('加载完成');
          })
                                </code>
                </pre>
            </dd>
            <dt id="Img-ready(图片尺寸预取)">img-ready</dt>
            <dd>
                <h5>描述</h5>
                <p>能在图片下载完成之前检测到图片真实尺寸，返回方法接受三个参数分别是图片地址、检测完成回调，下载完成回调</p>
                <h5>示例</h5>
                <pre> <code>
            &lt;!-- html --&gt;
            &lt;img id="demo" src="http://lorempixel.com/442/548/?582"&gt;
                                    </code>
                </pre>
                <pre> <code>
          var ready = require('img-ready');
          ready($('#demo').attr('src'), 
            function(width,height){
              $('body').append($('&lt;div&gt;预取width:'+width+' height:'+height+'&lt;/div&gt;'))
            }, function(width,height){
              $('body').append($('&lt;div&gt;加载完成！&lt;/div&gt;'));
            }
          )
                                    </code>
                </pre>
            </dd>
            <dt id="Input-Number(数字输入框)">input-number</dt>
            <dd>
                <h5>描述</h5>
                <p>数字输入框插件，继承<a href="#Input(输入框)">【input】</a>插件配置和方法(部分配置无效)，支持标签<code>data-options</code>属性传参</p>
                <p><code>$('.flow-ui-input-number')</code>元素将自动初始化，并且支持data-config属性</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>min</th>
                            <td>默认<code>0</code>，最小值</td>
                        </tr>
                        <tr>
                            <th>val</th>
                            <td>默认<code>1</code>，初始值</td>
                        </tr>
                        <tr>
                            <th>countstep</th>
                            <td>默认<code>1</code>，每次加减数量</td>
                        </tr>
                        <tr>
                            <th>max</th>
                            <td>默认无限大，最大值</td>
                        </tr>
                        <tr>
                            <th>style</th>
                            <td>默认<code>'default'</code>，可选'inline'，计数器样式</td>
                        </tr>
                        <tr>
                            <th>onChange(val)</th>
                            <td>默认无，数值变更回调</td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <p>同<a href="#Input(输入框)">【输入框】</a>组件。</p>
                <h5>示例</h5>
                <pre> <code>
            &lt;style type="text/css"&gt;
                .demo{width:200px;margin-bottom: 1em;}
            &lt;/style&gt;                           
            &lt;input type="text" name="count" class="demo mytest"&gt;

            &lt;div class="demo flowui-input-number" data-options={"name":"countnumber"}&gt;&lt;/div&gt;                  
                                      
            &lt;button type="button" id="act1" class="btn btn-default"&gt;切换实例1禁用状态&lt;/button&gt;  
                                    </code>
                </pre>
                <pre> <code>
            require('input-number');
            var mycount = $('.mytest').inputNumber({
                min:2,
                max:9,
                val: 5,
                style: 'inline',
                onChange: function(val) {
                    $('body').append('&lt;p&gt;实例1的值：' + val + '&lt;/p&gt;');
                }
            });

            var disable = false;
            $('#act1').on('click',function(){
                disable = !disable;
                mycount.disabled(!disable);
            });
                                </code>
                </pre>
            </dd>
            <dt id="Input(输入框)">input</dt>
            <dd>
                <h5>描述</h5>
                <p>输入框插件，可以基于input、textarea标签生成文本框，也可以基于其他标签在其内部插入一个文本框，支持<code>data-options</code>属性传参</p>
                <p><code>$('.flow-ui-input')</code>元素将自动初始化，并且支持data-config属性</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>color</th>
                            <td>默认<code>""</code>，情景色配置，可选<code>"success"</code><code>"warning"</code><code>"danger"</code></td>
                        </tr>
                        <tr>
                            <th>id</th>
                            <td>默认自动生成随机id，指定生成input的id</td>
                        </tr>
                        <tr>
                            <th>width</th>
                            <td>默认无，组件宽度，默认继承目标元素的class定义的宽度</td>
                        </tr>
                        <tr>
                            <th>buttons</th>
                            <td>默认无，按钮配置，格式如下：
                                <pre> <code>
            [{
                text: '确定',
                click: function(){}
            }, {
                text: '清除',
                click: function(){}
            }]
                                            </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>type</th>
                            <td>指定生成input的type类型，默认使用目标元素的type类型</td>
                        </tr>
                        <tr>
                            <th>holder</th>
                            <td>默认<code>''</code>，指定生成input的placeholder文字</td>
                        </tr>
                        <tr>
                            <th>val</th>
                            <td>默认<code>''</code>，指定初始value</td>
                        </tr>
                        <tr>
                            <th>text</th>
                            <td>默认<code>''</code>，指定生成input的初始显示值</td>
                        </tr>
                        <tr>
                            <th>icon</th>
                            <td>默认<code>''</code>，指定icon编码，不传则不显示图标</td>
                        </tr>
                        <tr>
                            <th>iconPosition</th>
                            <td>默认<code>'right'</code>, 图标位置，可选'left'</td>
                        </tr>
                        <tr>
                            <th>size</th>
                            <td>默认<code>''</code>，生成组件尺寸，可选'sm'/'lg'</td>
                        </tr>
                        <tr>
                            <th>name</th>
                            <td>默认<code>''</code>，指定input的name值，不传则不会添加或修改原始input的name属性</td>
                        </tr>
                        <tr>
                            <th>disable</th>
                            <td>默认<code>false</code>，是否禁用</td>
                        </tr>
                        <tr>
                            <th>readonly</th>
                            <td>默认<code>false</code>，是否只读</td>
                        </tr>
                        <tr>
                            <th>datatype</th>
                            <td>默认<code>''</code>，验证类型，不传将继承目标元素的datatype属性，释义同<a href="#Validform(表单验证)">【validform组件】</a></td>
                        </tr>
                        <tr>
                            <th>errormsg</th>
                            <td>默认<code>''</code>，验证错误提示，不传将继承目标元素的errormsg属性，释义同<a href="#Validform(表单验证)">【validform组件】</a></td>
                        </tr>
                        <tr>
                            <th>nullmsg</th>
                            <td>默认<code>''</code>，验证未填提示，不传将继承目标元素的nullmsg属性，释义同<a href="#Validform(表单验证)">【validform组件】</a></td>
                        </tr>
                        <tr>
                            <th>render(val)</th>
                            <td>默认无，格式化方法，接收原始值，需返回格式化后的值，用于input组件展示</td>
                        </tr>
                        <tr>
                            <th>onChange(val)</th>
                            <td>默认无，监听输入变化回调，接收当前值</td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回对象方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>disabled([flag])</th>
                            <td>禁用input实例，若flag为真值将解禁</td>
                        </tr>
                        <tr>
                            <th>readonly([flag])</th>
                            <td>只读input实例，若flag为真值将恢复可写</td>
                        </tr>
                        <tr>
                            <th>destroy()</th>
                            <td>销毁实例</td>
                        </tr>
                        <tr>
                            <th>clear()</th>
                            <td>清空输入</td>
                        </tr>
                        <tr>
                            <th>reset()</th>
                            <td>恢复实例为初始值</td>
                        </tr>
                        <tr>
                            <th>text([setValue])</th>
                            <td>读取/设置实例显示值</td>
                        </tr>
                        <tr>
                            <th>val([setValue])</th>
                            <td>读取/设置实例值</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;style&gt;
                .demo{display:inline-block;width:250px;vertical-align: bottom;}
            &lt;/style&gt;                        
            &lt;form class="wrap"&gt;  
                &lt;!-- 基于input标签 --&gt;
                &lt;input type="text" name="input1" class="demo input1"&gt;
                &lt;!-- 基于textarea标签 --&gt;
                &lt;textarea class="demo flowui-input" name="area1"&gt;&lt;/textarea&gt;
                &lt;!-- 基于其他标签 --&gt;
                &lt;div class="demo inputdiv flowui-input" data-options={"name":"input2"}&gt;&lt;/div&gt;

                &lt;button type="button" class="btn btn-default setreadonly"&gt;切换input1只读状态&lt;/button&gt;
            &lt;/form&gt;
                                    </code>
                </pre>
                <pre> <code>
            require('input');                  
            var myinput = $('.input1').input({
                buttons: [
                    {
                        text: '确定',
                        click:function(val, text){
                            console.log('val:',val);
                            console.log('text:',text);
                        }
                    },
                    {
                        text: '清除',
                        click:function(val, text){
                            myinput.clear();
                        }
                    }
                ],
                val:'100',
                holder: '输入金额',
                errormsg: '请输入整数!',
                datatype:'n',
                render:function(val){
                    return '$'+val;
                },
                onChange: function(val){
                    console.log('change to',val);
                }
            });

            var readable = true;
            $('.setreadonly').on('click',function(){
                readable = !readable;
                myinput.readonly(readable);
            });
                                    </code>
                </pre>
            </dd>
            <dt id="Instantclick(链接预加载)">instantclick</dt>
            <dd>
                <h5>描述</h5>
                <p>链接预加载插件，详细应用方案查看<a href="#instantclick">【链接预加载】</a>，文档参见<a href="http://instantclick.io/documentation" target="_blank">官方文档</a></p>
                <h5>示例</h5>
                <pre>
                    <code>
    var ic = require('instantclick');
    ic.init();
                    </code>
                </pre>
            </dd>
            <dt id="Label(标签)">label</dt>
            <dd>
                <h5>描述</h5>
                <p>标签插件，可以用于标记和分类。返回 <code>Label</code>方法，语法：<code>Label(config)</code>，或使用jquery插件语法：<code>$el.label(config)</code></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>默认 <code>null</code>，表格生成元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>color</th>
                            <td>
                                <p>默认 <code>"primary"</code>，指定实例色调，支持【color】组件中所有颜色名称</p>
                            </td>
                        </tr>
                        <tr>
                            <th>data</th>
                            <td>
                                <p>默认 <code>[]</code>，示例初始化数据，对象数据，对象必须包含 <code>text</code>属性</p>
                            </td>
                        </tr>
                        <tr>
                            <th>closable</th>
                            <td>
                                <p>默认 <code>false</code>，是否可关闭</p>
                            </td>
                        </tr>
                        <tr>
                            <th>type</th>
                            <td>
                                <p>默认<code>null</code>，标签类型，可选"bordered"</p>
                            </td>
                        </tr>
                        <tr>
                            <th>size</th>
                            <td>
                                <p>默认<code>null</code>，标签类型，可选"sm" | "lg"</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onClose</th>
                            <td>
                                <p>默认<code>null</code>，标签关闭回调方法 @param(object) : 当前关闭标签的数据对象</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>data([Array])</th>
                            <td>
                                <p>设置/获取标签数据</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="m demo"&gt;&lt;/div&gt;
            &lt;div class="btn btn-default add"&gt;add&lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
            require('label');
            var mytag = $('.demo').label({
                data: [{
                    text: '标签1',
                    name: 'tag1'
                }, {
                    text: '标签2',
                    name: 'tag2'
                }],
                closable: true,
                onClose: function(tag) {
                    console.log('delete:' + tag.text);
                }
            });
            $('.add').on('click', function(){
                var otag = mytag.data();
                otag.push({
                    text: '标签' + (otag.length + 1)
                });
                mytag.data(otag);
            });
                                    </code>
                </pre>
            </dd>
            <dt id="Lazyload(图片懒加载)">lazyload</dt>
            <dd>
                <h5>描述</h5>
                <p>图片懒加载插件，用于滚动时加载视窗内的图片或元素背景。返回<code>LazyLoad</code>方法，语法：<code>LazyLoad(config)</code>，或使用jquery插件语法：<code>$el.lazyload(config)</code></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>默认 <code>null</code>，懒加载区域选择器，直接调用方法必填，jquery插件调用时可忽略，将默认应用$(this)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>attr</th>
                            <td>
                                <p>默认 <code>data-lazy</code>，懒加载元素或图片存贮图片地址的属性。</p>
                            </td>
                        </tr>
                        <tr>
                            <th>everyCount</th>
                            <td>
                                <p>默认 <code>3</code>，每次加载的数量。</p>
                            </td>
                        </tr>
                        <tr>
                            <th>distance</th>
                            <td>
                                <p>默认 <code>100</code>，距离目标进入屏幕可见范围的开始加载的距离，单位px。</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;style&gt;
          .demo p{float:left; margin:20px; width:200px; height: 200px; background:#eee;background-position:center;}
          &lt;/style&gt;
                                    </code>
                    <code>
          &lt;div class="demo"&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/800x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/801x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/802x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/803x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/804x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/805x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/806x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/807x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/808x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/809x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/810x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/811x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/812x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/813x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/814x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/815x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/816x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/817x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/818x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/819x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/820x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/821x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/822x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/823x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/824x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/825x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/826x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/827x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/828x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/829x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/830x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/831x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/832x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/833x600/" &gt;&lt;/p&gt;
            &lt;p&gt;&lt;img data-lazy="http://temp.im/834x600/" &gt;&lt;/p&gt;
            &lt;p data-lazy="http://temp.im/835x600/"&gt; element &lt;/p&gt;
          &lt;/div&gt;
                                        </code>
                </pre>
                <pre> <code>
          //js
          require('lazyload');
          $('.demo').lazyload();
                                    </code>
                </pre>
            </dd>
            <dt id="Marquee(跑马灯)">marquee</dt>
            <dd>
                <h5>描述</h5>
                <p>跑马灯插件(横竖方向的匀速循环滚动)
                </p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>direction</th>
                            <td>滚动方向，可选"left/top"，默认"top"</td>
                        </tr>
                        <tr>
                            <th>duration</th>
                            <td>单次滚动时长，单位ms，默认5000</td>
                        </tr>
                        <tr>
                            <th>pauseOnHover </th>
                            <td>悬停暂停，默认true</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;style&gt;
            .marquee{height:150px;border:1px solid blue;}
            .marquee2{width:150px;border:1px solid red;}
            &lt;/style&gt;
                                        </code>
                    <code>
          &lt;div class='marquee'&gt;
            &lt;p&gt; cont1 &lt;/p&gt;
            &lt;p&gt; cont2 &lt;/p&gt;
            &lt;p&gt; cont3 &lt;/p&gt;
            &lt;p&gt; cont4 &lt;/p&gt;
            &lt;p&gt; cont5 &lt;/p&gt;
            &lt;p&gt; cont6 &lt;/p&gt;
            &lt;p&gt; cont7 &lt;/p&gt;
            &lt;p&gt; cont8 &lt;/p&gt;
            &lt;p&gt; cont9 &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class='marquee2'&gt;
            这是一段测试文字这是一段测试文字这是一段测试文字这是一段测试文字!!
          &lt;/div&gt;
                                      </code>
                </pre>
                <pre> <code>
          require.async('marquee',function(){
            $('.marquee').marquee();
            $('.marquee2').marquee({
              direction:'left'
            });
          });
                                    </code>
                </pre>
            </dd>
            <dt id="Masonry(瀑布流)">masonry</dt>
            <dd>
                <h5>描述</h5>
                <p>瀑布流插件，封装自<a href="http://masonry.desandro.com/" target="_blank">masonry</a></p>
                <h5>示例</h5>
                <pre> <code>
          &lt;style&gt; 
            /*css*/
            .item { width: 200px; margin:10px;}
          &lt;/style&gt;
                                  </code>
                    <code>
          &lt;!--html--&gt;
          &lt;ul id="container"&gt;
            &lt;li class="item"&gt;
              &lt;img src="http://temp.im/200x100/"&gt;
            &lt;/li&gt;
            &lt;li class="item"&gt;
              &lt;img src="http://temp.im/200x400/"&gt;
            &lt;/li&gt;
            &lt;li class="item"&gt;
              &lt;img src="http://temp.im/200x300/"&gt;
            &lt;/li&gt;
            &lt;li class="item"&gt;
              &lt;img src="http://temp.im/200x600/"&gt;
            &lt;/li&gt;
            &lt;li class="item"&gt;
              &lt;img src="http://temp.im/200x100/"&gt;
            &lt;/li&gt;
            &lt;li class="item"&gt;
              &lt;img src="http://temp.im/200x400/"&gt;
            &lt;/li&gt;
            &lt;li class="item"&gt;
              &lt;img src="http://temp.im/200x300/"&gt;
            &lt;/li&gt;
            &lt;li class="item"&gt;
              &lt;img src="http://temp.im/200x600/"&gt;
            &lt;/li&gt;
          &lt;/ul&gt;    
                                    </code>
                </pre>
                <pre> <code>
          require('masonry');
          require('img-loaded');

          var $container = $('#container'),win=$(window),loaded = true;
          //应用瀑布流
          $container.imagesLoaded(function(){
            $container.masonry({
              itemSelector: '.item'
            })
          });
          //滚动加载
          win.scroll(function scrollHandler(){
            if(loaded){
              var t=win.scrollTop(),
                h=win.height(),
                t1= $container.offset().top, 
                h1 =$container.outerHeight(true);

              if(t+h &gt;= t1+h1){
                addItem(3);
              }
            }
          });
             
          //模拟动态加载数据
          function addItem(n) {
            loaded = false;
            var fragment =  '&lt;li class="item"&gt;\
              &lt;img src="http://temp.im/200x100/"&gt;\
            &lt;/li&gt;\
            &lt;li class="item"&gt;\
              &lt;img src="http://temp.im/200x400/"&gt;\
            &lt;/li&gt;\
            &lt;li class="item"&gt;\
              &lt;img src="http://temp.im/200x300/"&gt;\
            &lt;/li&gt;';
            for ( var i = 0; i &lt; n; i++ ) {
              fragment+=fragment;
            };
            $container.append($(fragment)).imagesLoaded(function(){
              $container.masonry("reload");
              loaded = true;
            });
          };
                                    </code>
                </pre>
            </dd>
            <dt id="Menu(菜单)">menu</dt>
            <dd>
                <h5>描述</h5>
                <p>为页面和功能提供导航的菜单列表，常用于网站顶部和左侧。返回<code>Menu</code>方法，语法：<code>Menu(config)</code>，或者使用jquery插件语法：<code>$el.menu(config)</code> </p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>默认<code>null</code>，制定触发元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</td>
                        </tr>
                        <tr>
                            <th>data</th>
                            <td>默认无，菜单数据，必填</td>
                        </tr>
                        <tr>
                            <th>key</th>
                            <td>默认无，菜单项的唯一标识，必填</td>
                        </tr>
                        <tr>
                            <th>mode</th>
                            <td>默认<code>"horizontal"</code>，菜单类型，可选值为 horizontal | vertical</td>
                        </tr>
                        <tr>
                            <th>theme</th>
                            <td>默认<code>"primary"</code>，主题，可选值为 light、dark、primary</td>
                        </tr>
                        <tr>
                            <th>subicon</th>
                            <td>默认<code>"&amp;#xe609;"</code>，多重菜单标题右侧指示图标</td>
                        </tr>
                        <tr>
                            <th>actived</th>
                            <td>默认无，当前激活的菜单项<code>key</code>值</td>
                        </tr>
                        <tr>
                            <th>opened</th>
                            <td>默认<code>[]</code>，当前打开的菜单项<code>key</code>值组成的数组，horizontal模式只打开第一个</td>
                        </tr>
                        <tr>
                            <th>toggle</th>
                            <td>默认<code>true</code>，是否显示切换效果，只对vertical模式有效</td>
                        </tr>
                        <tr>
                            <th>onSelect</th>
                            <td>菜单切换时触发回调，@param(object, $item) : 当前数据对象，当前Dom对象</td>
                        </tr>
                        <tr>
                            <th>onClick</th>
                            <td>菜单点击回调，@param(object, $item, isCurrent) : 当前数据对象，当前Dom对象，是否已选中</td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>open(key)</th>
                            <td>打开指定<code>key</code>值的项</td>
                        </tr>
                        <tr>
                            <th>active(key)</th>
                            <td>激活指定<code>key</code>值的项</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="wrap"&gt;
                &lt;nav id="menu"&gt;&lt;/nav&gt;
                &lt;div class="btn btn-default menu-open"&gt;打开子菜单&lt;/div&gt;
                &lt;div class="btn btn-default menu-active"&gt;激活第三项&lt;/div&gt;
            &lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
            var Menu = require('menu');
            var mymenu = Menu({
                el:'#menu',
                //theme: 'dark',
                data: [
                    {
                        item: '&lt;i class="ion"&gt;&amp;#xe64a;&lt;/i&gt;首页',
                        id: 1
                    },{
                        item: '订单',
                        id: 2
                    },{
                        item: '会员',
                        id: 3,
                        sub:[
                            {
                                item: '会员统计',
                                id: 30
                            },{
                                item: '会员群发',
                                id: 31
                            },{
                                item: '会员管理',
                                id: 32
                            }
                        ]
                    },{
                        item: '店铺',
                        id: 4
                    },{
                        item: '系统',
                        id: 5
                    }
                ],
                key: 'id',
                actived: 1,
                toggle: false,
                onSelect: function(object, item){
                    console.log(object, item);
                }
            });
            
            $('.menu-open').on('click', function(){
                mymenu.open(3);
            });
            $('.menu-active').on('click', function(){
                mymenu.active(4);
            });
                                    </code>
                </pre>
            </dd>
            <dt id="Mousemenu(右键菜单)">mousemenu</dt>
            <dd>
                <h5>描述</h5>
                <p>自定义鼠标右键，支持菜单内分组，调用格式为<code> $target.mousemenu( data, option )</code> </p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>name</th>
                            <td>将作为菜单id的后缀，以区别多组菜单，只有一组可省略</td>
                        </tr>
                        <tr>
                            <th>offsetX</th>
                            <td>默认2，单位px，菜单左上角距点击位置横向距离</td>
                        </tr>
                        <tr>
                            <th>offsetY</th>
                            <td>默认2，单位px，菜单左上角距点击位置纵向距离</td>
                        </tr>
                        <tr>
                            <th>textLimit</th>
                            <td>默认6，菜单项显示文字个数，超出显示省略号</td>
                        </tr>
                        <tr>
                            <th>beforeShow</th>
                            <td>菜单显示前回调</td>
                        </tr>
                        <tr>
                            <th>afterShow</th>
                            <td>菜单显示后回调</td>
                        </tr>
                        <tr>
                            <th>broke</th>
                            <td>用于点击时做条件判断，返回真值将阻止本次弹出</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;style&gt;
          /*css*/
          .demo{height: 400px;border:1px solid #ccc;line-height: 400px;text-align: center;}
          &lt;/style&gt;
                                      </code>
                    <code>
          &lt;!-- html --&gt;
          &lt;div class="demo"&gt;测试区域&lt;/div&gt;
                                      </code>
                </pre>
                <pre> <code>
          require('mousemenu');
          $('.demo').mousemenu(
              [
                  [{
                      text: "组1-1",
                      func: function() {
                        alert("组1-1");
                      }
                  }, {
                      text: "组1-2",
                      func: function() {
                        alert("组1-2");
                      }
                  }],
                  [{
                      text: "组2-1",
                      func: function() {
                        alert("组2-1");
                      }
                  }, {
                      text: "组2-2",
                      func: function() {
                        alert("组2-2");
                      }
                  }]
              ], {
                  //配置
              }
          );
                                  </code>
                </pre>
            </dd>
            <dt id="Mousetrap(按键监听)">mousetrap</dt>
            <dd>
                <h5>描述</h5>
                <p>按键监听</p>
                <h5>示例</h5>
                <pre> <code>
          &lt;!-- html --&gt;
          &lt;div class="demo"&gt;
            &lt;p&gt;单按键：按"a"或"?"或"esc"&lt;/p&gt;
            &lt;p&gt;功能键：按"ctrl+shift+k"&lt;/p&gt;
            &lt;p&gt;多组按键绑定同一个事件：按"command k" 或者 "control k"&lt;/p&gt;
            &lt;p&gt;组合键：试试"up up down down left right left right b a enter"&lt;/p&gt;
          &lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
          //js
          require.async('mousetrap',function(){
            // 单按键
            Mousetrap.bind('a', function() { 
              alert('a');
            });
            Mousetrap.bind("?", function() { 
              alert('show shortcuts!');
            });
            Mousetrap.bind('esc', function() { 
              //阻止浏览器默认事件
              if (e.preventDefault) {
                  e.preventDefault();
              } else {
                  e.returnValue = false;
              }
              alert('退出？');
            }, 'keyup');
           
            // 功能键
            Mousetrap.bind('ctrl+shift+k', function() { 
              alert('command shift k');
            });

            // 多组按键绑定相同事件
            Mousetrap.bind(['command+k', 'ctrl+k'], function() {
                alert('command k 或者 control k');
                return false; //取消系统默认事件
            });
           
            // 组合键
            Mousetrap.bind('up up down down left right left right b a enter', function() {
                alert("哇咔咔！");
            });
          });
                          
                                    </code>
                </pre>
            </dd>
            <dt id="Mousewheel(鼠标滚轮监听)">mousewheel</dt>
            <dd>
                <h5>描述</h5>
                <p>鼠标滚轮监听，回调函数的event包含三个属性：deltaX，deltaY，deltaFactor；分别代表横向滚动方向，纵向滚动方向，滚动长度(不同浏览器下该值不一致)</p>
                <h5>示例</h5>
                <pre> <code>
          &lt;style&gt;
          /*css*/
          .demo,.control{height: 200px;overflow: auto;border:1px solid #ccc;margin:10px;}
          &lt;/style&gt;
                                    </code>
                    <code>
          &lt;!-- html --&gt;
          &lt;div class="demo"&gt;
          滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
          滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
          滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
          滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
          滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
          滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
          滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;滚动测试&lt;br&gt;
          &lt;/div&gt;
          &lt;div class="control"&gt;&lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
          //js
          require('mousewheel');
          //开始监听
          $('.demo').on('mousewheel', function(event) {
              $('.control').append('&lt;p&gt;'+event.deltaX+', '+event.deltaY+', '+event.deltaFactor+'&lt;/p&gt;');
          });
          //停止监听
          setTimeout(function(){
              $('.demo').unmousewheel();
              $('.control').text('监听事件已卸载！');
          },5e3)
                                    </code>
                </pre>
            </dd>
            <dt id="Notice(通知提醒)">Notice</dt>
            <dd>
                <h5>描述</h5>
                <p>在界面右上角显示可关闭的全局通知，常用于以下场景：通知内容带有描述信息、系统主动推送。返回Notice方法</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>title</th>
                            <td>
                                默认<code>""</code>，通知提醒的标题
                            </td>
                        </tr>
                        <tr>
                            <th>desc</th>
                            <td>
                                默认<code>""</code>，通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式
                            </td>
                        </tr>
                        <tr>
                            <th>color</th>
                            <td>
                                默认<code>"primary"</code>，主题色，支持【颜色】组件中所有的颜色
                            </td>
                        </tr>
                        <tr>
                            <th>delay</th>
                            <td>
                                默认<code>0</code>，自动关闭的延时，单位毫秒
                            </td>
                        </tr>
                        <tr>
                            <th>onClose</th>
                            <td>
                                默认无，关闭时的回调
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>obj.hide()</th>
                            <td>
                                关闭当前notice实例
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="wrap"&gt;
                &lt;div class="btn btn-primary open"&gt;打开notice&lt;/div&gt;
            &lt;/div&gt; 
                                    </code>
                </pre>
                <pre> <code>
            var Notice = require('notice');
            var colors = ['primary', 'success', 'info', 'warning', 'danger'];
            var count = 0;

            $('.open').on('click',function(){
                Notice({
                    title: '这是标题' + parseInt(Math.random() * 1e6),
                    desc: '这里是描述',
                    color: colors[count],
                    delay: 3000
                });
                count++;
                if(count===colors.length){
                    count = 0;
                }
            });
                                    </code>
                </pre>
            </dd>
            <dt id="OffCanvas(伸缩菜单)">offcanvas</dt>
            <dd>
                <h5>描述</h5>
                <p>侧边伸缩导航菜单插件，多用于移动端导航，导航必须具有id属性，与导航控制按钮的href属性相同。</p>
                <h5>注意</h5>
                <ol>
                    <li>为避免插件加载期间导航错乱闪现，可以先用样式将导航隐藏，插件运行后会清除原样式。</li>
                    <li>使用点击预加载方案(PJAX)的情况下菜单会出现点击不收回的情况，需要在使用时增加配置：<code>{ onClick:{ close:true}}</code></li>
                </ol>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>position</th>
                            <td>默认 <code>"left"</code>，菜单位置，可选 top || right || bottom</td>
                        </tr>
                        <tr>
                            <th>zposition</th>
                            <td>默认 <code>"front"</code>，菜单层次，可选 next</td>
                        </tr>
                        <tr>
                            <th>slidingSubmenus</th>
                            <td>默认横向(<code>true</code>)，菜单展开方向，true || false</td>
                        </tr>
                        <tr>
                            <th>isMenu</th>
                            <td>默认 <code>true</code>，是否按导航结构初始化，自定义结构和样式需要设为false</td>
                        </tr>
                        <tr>
                            <th>classes</th>
                            <td>默认 <code>"mm-black"</code>，主题class, 可选 mm-light || mm-white</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;nav class="demo hide" id="menu"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="/1"&gt;导航&lt;/a&gt; &lt;/li&gt;
              &lt;li&gt;&lt;a href="/2"&gt;导航2&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="/#2"&gt;二级&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="/#2"&gt;二级&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="/#2"&gt;二级&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                 &lt;/li&gt;
                 &lt;li&gt;&lt;a href="/3"&gt;导航3&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="/#2"&gt;二级&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="/#2"&gt;二级&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="/#2"&gt;二级&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                 &lt;/li&gt;
                 &lt;li&gt;&lt;a href="/4"&gt;导航4&lt;/a&gt;
                    &lt;ul&gt;
                        &lt;li&gt;&lt;a href="/#2"&gt;二级&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="/#2"&gt;二级&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="/#2"&gt;二级&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                 &lt;/li&gt;
             &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;a href="#menu" class="btn btn-default mobile_key"&gt;导航控制按钮&lt;/a&gt;  &lt;!--导航控制按钮--&gt;
                                    </code>
                </pre>
                <pre> <code>
          //js
          require('offcanvas');
          $('.demo').offcanvas();
                                    </code>
                </pre>
            </dd>
            <dt id="On-scroll(滚动监听)">on-scroll</dt>
            <dd>
                <h5>描述</h5>
                <p>监听指定元素随页面滚动出现在视野中的事件，返回<code>onScroll</code>方法，语法：<code>onScroll(config)</code>，或者使用jquery插件语法：<code>$el.onScroll(config);</code></p>
                <p>可用于长页面懒加载；当指定元素为多个时，还可以关联定位(target)元素，实现滚动导航；当target元素向上滚出视野时，将为target元素或指定的targetFix元素添加<code>fixed</code>类，用于实现固定在页面顶部效果。</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>默认无，监听元素选择器，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</td>
                        </tr>
                        <tr>
                            <th>offset</th>
                            <td>可选，顶部位置计算偏移量，默认0</td>
                        </tr>
                        <tr>
                            <th>target</th>
                            <td>可选，绑定目标，jquery选择器格式，默认无</td>
                        </tr>
                        <tr>
                            <th>targetCell</th>
                            <td>可选，绑定目标子元素类型，默认'li'</td>
                        </tr>
                        <tr>
                            <th>targetFix</th>
                            <td>可选，设置将添加fixed类的元素，通常是target的外层</td>
                        </tr>
                        <tr>
                            <th>speed</th>
                            <td>可选，滚动动画时间，单位ms，默认300</td>
                        </tr>
                        <tr>
                            <th>onshow</th>
                            <td>可选，元素第一次出现在视野的回调，默认无</td>
                        </tr>
                        <tr>
                            <th>ontop</th>
                            <td>可选，当配置了target时，元素第一次与target距离为offset时触发，默认无</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
    &lt;!-- html --&gt;
    &lt;style&gt;
        .target_wrap {
            height: 42px;
        }
        
        .demo_Target {
            width: 980px;
            margin: 0 auto;
            overflow: hidden;
            *zoom: 1;
            background: #fff;
            border-left: 1px solid #eee;
        }
        
        .demo_Target li {
            float: left;
            height: 40px;
            line-height: 40px;
            border: 1px solid #eee;
            margin-left: -1px;
            width: 33%;
            text-align: center;
            cursor: pointer;
        }
        
        .demo_Target.fixed {
            position: fixed;
            left: 50%;
            margin-left: -490px;
            top: 0;
            z-index: 99;
        }
        
        .demo_Target .active {
            color: #39f;
            background: #eee;
        }
        
        .demo_sections {
            width: 978px;
            border: 1px solid #ccc;
            padding: 2em 0;
            margin: 2em auto;
            height: 800px;
        }
        
        .lazyPush {
            height: 400px;
        }
    &lt;/style&gt;

    &lt;div class=&quot;target_wrap&quot;&gt;
        &lt;ul class=&quot;demo_Target&quot;&gt;
            &lt;li&gt;channel01&lt;/li&gt;
            &lt;li&gt;channel02&lt;/li&gt;
            &lt;li&gt;channel03&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class=&quot;demo_sections&quot;&gt;
        anything...1
        &lt;textarea class=&quot;hide&quot;&gt;
            &lt;img src=&quot;http://temp.im/500x400/&quot;&gt;
          &lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div class=&quot;demo_sections&quot;&gt;
        anything...2
        &lt;textarea class=&quot;hide&quot;&gt;
            &lt;img src=&quot;http://temp.im/500x400/&quot;&gt;
          &lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div class=&quot;demo_sections&quot;&gt;
        anything...3
        &lt;textarea class=&quot;hide&quot;&gt;
            &lt;img src=&quot;http://temp.im/500x400/&quot;&gt;
          &lt;/textarea&gt;
    &lt;/div&gt;
                    </code>
                </pre>
                <pre>
                    <code>
    var responsive = require('responsive');
    require('on-scroll');
    $('.demo_sections').onScroll({
        offset: 42,
        target: '.demo_Target',
        onshow: function(elem, index) {
            responsive.topush(elem, function() {
                console.log('元素' + index + '懒加载完成');
            });
        },
        ontop: function(elem, index){
            console.log('ele' + index + '就位');
        }
    }); 
                    </code>
                </pre>
            </dd>
            <dt id="Page(分页)">page</dt>
            <dd>
                <h5>描述</h5>
                <p>按指定配置生成分页组件，返回<code>Page</code>方法，语法：<code>Page(config)</code>，或者使用jquery插件语法：<code>$el.page(config);</code></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>默认无，必填，分页展示容器，jquery选择器格式，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</td>
                        </tr>
                        <tr>
                            <th>current</th>
                            <td>默认<code>1</code>，当前页码</td>
                        </tr>
                        <tr>
                            <th>showNum</th>
                            <td>默认<code>5</code>，显示页数</td>
                        </tr>
                        <tr>
                            <th>total</th>
                            <td>默认无，必填，总页数</td>
                        </tr>
                        <tr>
                            <th>holder</th>
                            <td>默认<code>'...'</code>，翻篇占位符</td>
                        </tr>
                        <tr>
                            <th>hook</th>
                            <td>默认无，自定义样式钩子</td>
                        </tr>
                        <tr>
                            <th>onChange</th>
                            <td>默认无，页码改变回调，参数接收点击页码</td>
                        </tr>
                        <tr>
                            <th>size</th>
                            <td>默认<code>'normal'</code>，内置尺寸，可选'sm / lg'</td>
                        </tr>
                        <tr>
                            <th>auto</th>
                            <td>默认<code>true</code>，是否自动渲染当前状态</td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>set(obj)</th>
                            <td>更改显示状态，obj只接受三个属性：current，total，pageSize</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;div class="wrap"&gt;
          &lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
            require.async('page',function(page){
                page({
                    el: '.wrap',
                    total:10,
                    onChange: function(page){
                        console.log(page);
                    }
                });
            });
                                    </code>
                </pre>
            </dd>
            <dt id="PagingLoad(分页加载)">paging-load</dt>
            <dd>
                <h5>描述</h5>
                <p>自动生成分页参数的请求方法，调用后返回当前分页加载实例</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>url</th>
                            <td>默认无，必填，分页请求地址</td>
                        </tr>
                        <tr>
                            <th>size</th>
                            <td>默认<code>6</code>，每页条数，服务端将接收到此参数的实际key为<code>"page_size"</code></td>
                        </tr>
                        <tr>
                            <th>data</th>
                            <td>默认<code>{}</code>，请求参数，不得包含"page_index"和"page_size"键</td>
                        </tr>
                        <tr>
                            <th>success</th>
                            <td>ajax成功回调</td>
                        </tr>
                        <tr>
                            <th>nomore</th>
                            <td>没有更多回调(需符合<a href="#f_b">前后端分离</a>数据约定)</td>
                        </tr>
                        <tr>
                            <th>error</th>
                            <td>ajax错误回调</td>
                        </tr>
                    </tbody>
                </table>
                <h5>实例方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>load([callback])</th>
                            <td>
                                <p>加载新的一页，参数中将包含从<code>1</code>开始累加的<code>"page_index"</code>值，@param([callback]) : 加载完成后回调方法，若参数中的success/nomore方法明确<code>return</code>则该回调不执行。</p>
                            </td>
                        </tr>
                        <tr>
                            <th>reload([hold], [data])</th>
                            <td>
                                <p>将当前实例的页码重置为初始值。若hold为真值只重置不请求，若data为对象格式将合并到当前参数中。</p>
                            </td>
                        </tr>
                        <tr>
                            <th>destroy()</th>
                            <td>
                                <p>销毁当前实例</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="m"&gt;打开控制台查看网络请求&lt;/div&gt;
            &lt;div class="btn btn-default pagingLoad"&gt;分页加载&lt;/div&gt;
            &lt;div class="btn btn-default reload"&gt;分页重新加载&lt;/div&gt;
            &lt;div class="btn btn-default destroy"&gt;销毁分页加载实例&lt;/div&gt;

                                    </code>
                </pre>
                <pre> <code>
            var pagingLoad = require('paging-load');
            var myload = pagingLoad({
                url: 'http://rap.taobao.org/mockjsdata/1101/core/citylist/',
                data: {
                    "method": "test"
                },
                success: function(data) {
                    console.log(data);
                }
            });

            $('.pagingLoad').on('click', function() {
                myload.load();
            });
            
            $('.reload').on('click', function(){
                myload.reload();
            });

            $('.destroy').on('click', function(){
                myload.destroy();
            });
                                    </code>
                </pre>
            </dd>
            <dt id="Progress(进度条)">progress</dt>
            <dd>
                <h5>描述</h5>
                <p>展示操作或任务的当前进度，比如上传文件。</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>默认 <code>null</code>，进度条容器元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>persent</th>
                            <td>
                                <p>默认 <code>0</code>，初始化实例进度，取值0-100</p>
                            </td>
                        </tr>
                        <tr>
                            <th>color</th>
                            <td>
                                <p>默认 <code>"primary"</code>，进度条色调，支持【color】组件的所有颜色</p>
                            </td>
                        </tr>
                        <tr>
                            <th>active</th>
                            <td>
                                <p>默认 <code>true</code>，实例是否为激活状态(动态光影)，当persent值达到100后自动设为 <code>false</code></p>
                            </td>
                        </tr>
                        <tr>
                            <th>height</th>
                            <td>
                                <p>默认 <code>0</code>，进度条宽度，默认将采用组件默认</p>
                            </td>
                        </tr>
                        <tr>
                            <th>showInfo</th>
                            <td>
                                <p>默认 <code>true</code>，是否显示进度信息</p>
                            </td>
                        </tr>
                        <tr>
                            <th>infoRender</th>
                            <td>
                                <p>进度信息渲染方法，param(persent, entity) : 当前进度值，当前实例方法。</p>
                                <p>默认：
                                    <code>
                function(persent, entity) {
                    return persent + '%';
                }
                                            </code>
                                </p>
                                <p><code>entity</code>只有一个 <code>color()</code>方法，用法同下文【返回方法】</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>persent([value])</th>
                            <td>设置/获取当前进度</td>
                        </tr>
                        <tr>
                            <th>color([value])</th>
                            <td>设置/获取当前实例色调</td>
                        </tr>
                        <tr>
                            <th>active([value])</th>
                            <td>设置/获取当前实例激活状态</td>
                        </tr>
                        <tr>
                            <th>destroy()</th>
                            <td>销毁实例</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="wrap"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="span-6 m-tb demo"&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="btn btn-default add"&gt;+&lt;/div&gt;
                &lt;div class="btn btn-default min"&gt;-&lt;/div&gt;
                &lt;div class="btn btn-default toggle"&gt;切换激活状态&lt;/div&gt;
            &lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
            require('progress');                 
            var myprog = $('.demo').progress({
                persent: 50,
                infoRender: function(persent, entity){
                    if(persent===100){
                        entity.color('success');
                        return '&lt;i class="ion"&gt;&amp;#xe924;&lt;/i&gt;成功';
                    }else{
                        entity.color('info');
                        return persent + '%';
                    }
                }
            });


            $('.add').on('click', function(){
                myprog.persent(myprog.persent() + 10);
            });  
            $('.min').on('click', function(){
                myprog.persent(myprog.persent() - 10);
            });    
            $('.toggle').on('click', function(){
                myprog.active(!myprog.active());
            });     
                                    </code>
                </pre>
            </dd>
            <dt id="Qr(二维码)">qr</dt>
            <dd>
                <h5>描述</h5>
                <p>生成二维码，封装自<a href="https://github.com/davidshimjs/qrcodejs" target="_blank">davidshimjs/qrcodejs</a>。</p>
                <h5>示例</h5>
                <pre> <code>
          &lt;style&gt;
            #qr_container{position: fixed;right:10px;bottom:10px;text-align: center;}
          &lt;/style&gt;
                                    </code>
                    <code>
          &lt;div id="qr_container"&gt; 微信扫描查看或分享 &lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
          //js
          var qr = require('qr');
             
          var qrcode = new qr(document.getElementById("qr_container"), {
            text: "http://www.jerei.com",             // 生成内容
            width: 128,                               // 宽
            height: 128,                              // 高
            colorDark : "#000000",                    // 颜色
            colorLight : "#ffffff",                   // 背景色
            correctLevel : qr.CorrectLevel.H          // 容错级别 L|M|Q|H
          });

          //qrcode.clear();                           // clear the code.
          //qrcode.makeCode("http://naver.com");      // make another code.
                                    </code>
                </pre>
            </dd>
            <dt id="Responsive(响应式工具)">responsive</dt>
            <dd>
                <h5>描述</h5>
                <p>响应式工具包，包含想响应式所需的js功能</p>
                <table class="table table-bordered">
                    <tbody>
                        <tr>
                            <td>getType([callback])</td>
                            <td>
                                <p>获取当前设备类型，回调函数可选，当无回调时返回字符串('Pc','Pad','Mobile')，有回调时回调接受返回字符串为参数：</p>
                                <pre> <code>
           var resp = require('responsive');
           //无回调
           var type=resp.getType();      //"Pc" || "Pad" || "Mobile"
           
           //有回调
           resp.getType(function(type){
              alert(type);                //"Pc" || "Pad" || "Mobile"
           })
           
                                                </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>getOrient([callback])</td>
                            <td>
                                <p>获取移动设备屏幕方向，回调函数可选，当无回调时返回字符串('Heng','Shu')，有回调时回调函数将持续监听屏幕方向变化，并接受屏幕方向为参数：</p>
                                <pre> <code>
           var resp = require('responsive');
           //无回调
           var orient=resp.getOrient();// "Heng" || "Shu"
           
           //有回调
           resp.getOrient(function(orient){
              alert(orient);// 每次旋转屏幕都将alert "Heng" 或 "Shu"
           })
                                                </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>resImg(bigSrc, [filter])</td>
                            <td>
                                <p>全局图片响应方法</p>
                                <p>图片的src将在手机端显示，bigSrc参数指定存放大图的自定义属性，可省，默认"data-src"，"data-src"图片地址将在pc和pad端显示。</p>
                                <p>filter参数传入响应图片的范围，可省，默认检索整个页面。</p>
                                <pre> <code>
            &lt;img src="small.jpg" data-src="big.jpg" /&gt; 
                                                </code>
                                    <code>
            var resp = require('responsive');
            resp.resImg();
                                                </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>topush(DOM,callback)</td>
                            <td>
                                <p><code>&lt;textarea&gt;</code>标签在页面中具有延迟渲染的特性，因此是一个天然的缓存容器，只要将自身隐藏，便实现了html5 <code>template</code>标签的特性，唯一的问题是使用<code>&lt;textarea&gt;</code>暂存的代码中不能包含另一个<code>&lt;textarea&gt;</code>，否则会造成暂存标签意外闭合，这时也可以选择<code>&lt;script type="text/template"&gt;</code>标签代替，它和<code>textarea</code>标签的作用是等价的，并且<code>script</code>标签自身就是不可见的，无须手动隐藏：</p>
                                <pre> <code>
             &lt;!--textarea标签暂存页面片段--&gt;
             &lt;div class="demo topush"&gt;
                &lt;textarea class="hide"&gt;
                  &lt;a href="#"&gt;暂存的页面片段&lt;/a&gt;
                  &lt;a href="#"&gt;暂存的页面片段&lt;/a&gt;
                  &lt;a href="#"&gt;暂存的页面片段&lt;/a&gt;
                &lt;/textarea&gt;
             &lt;/div&gt;
                                            </code>
                                    <code>
             &lt;!--script标签暂存页面片段--&gt;
             &lt;div class="demo topush"&gt;
                &lt;script type="text/template"&gt;
                  &lt;a href="#"&gt;暂存的页面片段&lt;/a&gt;
                  &lt;a href="#"&gt;暂存的页面片段&lt;/a&gt;
                  &lt;a href="#"&gt;暂存的页面片段&lt;/a&gt;
                &lt;/script&gt;
             &lt;/div&gt;
                                            </code>
                                </pre>
                                <p><code>resp.topush(DOM,callback)</code>方法专门用来取出暂存标签中的html片段(或发起Ajax)插入到外层元素中，两个参数分别是指定外层元素和取出后的回调函数，均为可选，DOM默认<code>.topush</code>。</p>
                                <p>加载后的dom会添加<code>pushed</code>类，用来标记暂存代码已经取出。</p>
                                <p>示例：</p>
                                <pre> <code>
           &lt;!--发起Ajax的例子--&gt;
           &lt;div class="demo topush"&gt;
              &lt;textarea class="hide" data-url="http://host.refined-x.com/test/ajax.php"&gt; &lt;/textarea&gt;
           &lt;/div&gt;
                                                </code>
                                    <code>
            var resp = require('responsive');
           //无参数调用，显示所有".topush"元素中的暂存代码
           resp.topush();  
           
           //有回调                  
           resp.topush(function(e){           
              console.log(e.attr('class')) //"topush ..."
           });
           
           //指定渲染目标                 
           resp.topush('.demo');
           
           //传入两个参数
           resp.topush('.demo',function(e){    
              console.log(e.html())//.demo 渲染后的html
           });     
                                              </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <td>scanpush()</td>
                            <td>
                                <p><code>resp.scanpush()</code>方法会扫描页面上具有延迟渲染类名的元素，并按规则对其渲染。</p>
                                <p>预置的四个按需渲染类是：<code>.PcPush</code>,<code>.UnpcPush</code>,<code>.MobilePush</code>,<code>.UnmobilePush</code>, 分别代表“只有Pc渲染”，“只有非Pc渲染”，“只有手机渲染”，“只有非手机渲染”,渲染完成后会触发该元素的渲染类同名事件，用
                                    <code>$(DOM).on('PcPush'/'UnpcPush'/'MobilePush'/'UnmobilePush')</code>可以捕捉到，事件也会冒泡到<code>body</code>上。</p>
                                <p>并且这四个类元素下的<code>textarea</code>标签将自动隐藏，不需要手动加隐藏类。</p>
                                <p>示例：</p>
                                <pre> <code>
          &lt;!-- html --&gt;
         &lt;div class="PcPush"&gt;
            &lt;textarea&gt;
               只在Pc显示
            &lt;/textarea&gt;
         &lt;/div&gt;
         
         &lt;div class="UnpcPush"&gt;
            &lt;textarea&gt;
               除了Pc都显示
            &lt;/textarea&gt;
         &lt;/div&gt;
                                               </code>
                                </pre>
                                <pre> <code>
            //js
            var resp = require('responsive');
            $('body').on('PcPush',function(){
                console.log( 'PcPush已经被渲染了' )
            })
            $('body').on('UnpcPush',function(){
                console.log( '.UnpcPush已经被渲染了' )
            })

            resp.scanpush();
          
                                               </code>
                                </pre>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </dd>
            <dt id="Render(渲染器)">render</dt>
            <dd>
                <h5>描述</h5>
                <p>创建一个<code>数据->模板</code>的单项绑定渲染器，返回<code>Render</code>方法，语法<code>var myRender = Render(confg)</code>。</p>
                <p>依赖etpl模块</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <td>el</td>
                            <td>
                                <p>默认<code>null</code>，模板填充元素，必填</p>
                            </td>
                        </tr>
                        <tr>
                            <td>template</td>
                            <td>
                                <p>默认<code>''</code>，etpl模板字符串，默认将寻找el内具有[template]属性的元素，将其<code>value或innerText</code>作为模板字符串，建议用<code>textarea/script</code>元素作为模板容器</p>
                            </td>
                        </tr>
                        <tr>
                            <td>data</td>
                            <td>
                                <p>默认<code>null</code>，将作为初始化模板数据</p>
                            </td>
                        </tr>
                        <tr>
                            <td>reload</td>
                            <td>
                                <p>默认<code>true</code>，决定以<code>.html()/.append()</code>的方式填充模板</p>
                            </td>
                        </tr>
                        <tr>
                            <td>etplConfig</td>
                            <td>
                                <p>默认<code>null</code>，etpl模板引擎配置</p>
                            </td>
                        </tr>
                        <tr>
                            <td>callback</td>
                            <td>
                                <p>默认<code>null</code>，渲染完成后回调方法</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <td>set(config)</td>
                            <td>
                                <p>修改渲染器配置，通产用来修改reload模式和callback回调</p>
                            </td>
                        </tr>
                        <tr>
                            <td>data([setData])</td>
                            <td>
                                <p>为渲染器赋值/取值，使用新数据渲染的结果将同步到容器元素</p>
                            </td>
                        </tr>
                        <tr>
                            <td>push(node, arrayData)</td>
                            <td>
                                <p>向node节点下的数组插入arrayData数据，如果node节点不存在或格式不是数组，将先设置为空数组。使用新数据渲染的结果将同步到容器元素</p>
                            </td>
                        </tr>
                        <tr>
                            <td>destroy()</td>
                            <td>
                                <p>销毁示例移除容器元素</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre>
                    <code>
    &lt;div class=&quot;p&quot; id=&quot;wrap&quot;&gt;
        &lt;textarea style=&quot;display: none&quot; template&gt;
        render result: ${time}
        &lt;/textarea&gt;
    &lt;/div&gt;
    &lt;div class=&quot;p&quot;&gt;
        &lt;div class=&quot;btn btn-default setIntval&quot;&gt;暂停/恢复&lt;/div&gt;
        &lt;div class=&quot;btn btn-default setReload&quot;&gt;重载/填充&lt;/div&gt;
        &lt;div class=&quot;btn btn-default destroy&quot;&gt;销毁&lt;/div&gt;
    &lt;/div&gt;
                    </code>
                </pre>
                <pre>
                    <code>
    var render = require('render');
    var myRender = render({
        el: '#wrap',
        reload: reload,
        callback: function($el, html) {
            console.log(html);
        }
    });
    var reload = true;
    var int = setInterval(function() {
        myRender.data({
            time: new Date()
        });
    }, 1000);

    $('.setIntval').on('click', function() {
        if (int) {
            int = clearInterval(int);
        } else {
            int = setInterval(function() {
                myRender.data({
                    time: new Date()
                });
            }, 1000)
        }
    });
    $('.setReload').on('click', function(){
        reload = !reload;
        myRender.set({
            reload: reload
        });
    });
    $('.destroy').on('click', function(){
        myRender.destroy();
    });
                    </code>
                </pre>
            </dd>
            <dt id="Scroll-bar(滚动条)">scroll-bar</dt>
            <dd>
                <h5>描述</h5>
                <p>滚动条美化插件，支持横向和纵向、滚动条自动隐藏、样式自定义。</p>
                <h5>注意</h5>
                <p>内容元素不能有可向上传导的margin-top属性，否则会干扰滚动定位。</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>wrap</th>
                            <td>包裹元素，默认不指定，将插入div.scroll_cont</td>
                        </tr>
                        <tr>
                            <th>monitor</th>
                            <td>否监听内容变化(用于多插件协作)，布尔值，默认false</td>
                        </tr>
                        <tr>
                            <th>keyway</th>
                            <td>按钮键程，默认30(px)</td>
                        </tr>
                        <tr>
                            <th>width</th>
                            <td>滚动条宽度，默认8(px)</td>
                        </tr>
                        <tr>
                            <th>btnLength</th>
                            <td>按钮长度，默认0(不显示按钮)</td>
                        </tr>
                        <tr>
                            <th>btnBreadth</th>
                            <td>按钮宽度，默认与滚动条同宽</td>
                        </tr>
                        <tr>
                            <th>sliderWidth</th>
                            <td>滑块宽度，默认与滚动条同宽</td>
                        </tr>
                        <tr>
                            <th>hideBar</th>
                            <td>自动隐藏滚动条，鼠标进入显示，默认false</td>
                        </tr>
                        <tr>
                            <th>ontop</th>
                            <td>滚动到顶部触发的回调，默认无</td>
                        </tr>
                        <tr>
                            <th>onend</th>
                            <td>滚动到底部触发的回调，默认无</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;style&gt;
          /*css*/
          .demo{position:relative;overflow:hidden;height:320px;max-width: 480px;margin:10px auto;}
          .demo .scroll_cont{background: yellow;}
          .demo .scroll_cont img{max-width: none;}
          &lt;/style&gt;
                                      </code>
                    <code>
          &lt;!--html--&gt;
          &lt;div class="demo demo1"&gt;
             &lt;img src="http://temp.im/480x480/"&gt;&lt;br/&gt;
             content conten ontentcontent1&lt;br/&gt;
             content7&lt;br/&gt;
             content conten ontentcontent1&lt;br/&gt;
             content7&lt;br/&gt;
          &lt;/div&gt;
          &lt;div class="demo demo2"&gt;
             &lt;img src="http://temp.im/900x320/"&gt;&lt;br/&gt;
          &lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
          //js
          require('scroll-bar');
          $('.demo1').scrollBar();
          $('.demo2').scrollBar({
              overflow: "x"
          });
                                    </code>
                </pre>
            </dd>
            <dt id="Scroll-col(横向滚动)">scroll-col</dt>
            <dd>
                <h5>描述</h5>
                <p>横向滚动，支持触屏和半响应; 需指定滚动元素宽度和效果容器高度。</p>
                <p>内置<code>hero</code>模式，用于全屏轮显焦点图，三张居中轮显。通常该模式的样式为.demo不设宽度(即全屏宽度)，.demo li普通banner宽度(如980px)；</p>
                <p>内置<code>unloop</code>模式，不循环滚动，用于做大事记类的时间轴效果；</p>
                <h5>注意</h5>
                <ol>
                    <li>效果自动计算间距("margin-right")，样式设置的右间距将被覆盖，或者作为效果无法运行时的后备样式。</li>
                    <li>当显示数+滚动步幅&gt;=元素总数时效果不可用</li>
                </ol>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>direct</th>
                            <td>自动播放方向，可选left | right</td>
                        </tr>
                        <tr>
                            <th>mode</th>
                            <td>模式，默认无，可选 hero(全屏三图滚动) | unloop(不循环)</td>
                        </tr>
                        <tr>
                            <th>num</th>
                            <td>滚动个数，默认99，即能显示几个显示几个</td>
                        </tr>
                        <tr>
                            <th>auto</th>
                            <td>默认true，自动播放</td>
                        </tr>
                        <tr>
                            <th>interval</th>
                            <td>默认5000，单位ms，自动播放间隔</td>
                        </tr>
                        <tr>
                            <th>duration</th>
                            <td>默认640，单位ms，单次滚动持续时长</td>
                        </tr>
                        <tr>
                            <th>animate</th>
                            <td>默认‘swing’，滚动效果，来自jquery.easing</td>
                        </tr>
                        <tr>
                            <th>step</th>
                            <td>默认1，每次滚动个数</td>
                        </tr>
                        <tr>
                            <th>wrap</th>
                            <td>默认‘ul’，指定滚动包裹元素</td>
                        </tr>
                        <tr>
                            <th>cell</th>
                            <td>默认‘li’，指定滚动元素</td>
                        </tr>
                        <tr>
                            <th>prev</th>
                            <td>指定向左按钮，默认无，将自动插入 '.arrs .arr_prev'元素</td>
                        </tr>
                        <tr>
                            <th>next</th>
                            <td>指定向右按钮，默认无，将自动插入 '.arrs .arr_next'元素</td>
                        </tr>
                        <tr>
                            <th>handletouch</th>
                            <td>默认false，是否劫持触屏事件</td>
                        </tr>
                        <tr>
                            <th>callback</th>
                            <td>回调 @param (nowStep)</td>
                        </tr>
                        <tr>
                            <th>ext</th>
                            <td>扩展 @param (this, showNumber, allStep)</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;style&gt;
          .demo {height: 10em; width:32em; display:none;margin-bottom:2em;}
          .demo li {width:10em; background:yellow;}
          .demo .arrs{position: absolute; top:50%; width:2em;height: 2em;background: yellow;margin-top: -1em;}
          .demo .arr_prev{left:0;}
          .demo .arr_next{right:0;}
          .demo .scroll_nav{position:absolute;left:0;top:0;}
          .demo .scroll_nav .on{color:#39f;}
          &lt;/style&gt;             
                                    </code>
                    <code>
          &lt;h4&gt;普通模式&lt;/h4&gt;      
          &lt;div class="demo"&gt;
             &lt;ul&gt;
                &lt;li&gt;&lt;img src="http://temp.im/300x301/" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="http://temp.im/300x302/" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="http://temp.im/300x303/" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="http://temp.im/300x304/" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="http://temp.im/300x305/" /&gt;&lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt;
                                    </code>
                    <code>
          &lt;style&gt;
          .demo-hero { display:none;}
          .demo-hero li {width:980px; background:yellow;}
          .demo-hero .arrs{position: absolute; top:50%; width:2em;height: 2em;background: yellow;margin-top: -1em;}
          .demo-hero .arr_prev{left:0;}
          .demo-hero .arr_next{right:0;}
          &lt;/style&gt;
                                    </code>
                    <code>
          &lt;h4&gt;hero模式&lt;/h4&gt;  
          &lt;div class="demo-hero"&gt;
             &lt;ul&gt;
                &lt;li&gt;&lt;img src="http://temp.im/980x301/" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="http://temp.im/980x302/" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="http://temp.im/980x303/" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="http://temp.im/980x304/" /&gt;&lt;/li&gt;
                &lt;li&gt;&lt;img src="http://temp.im/980x305/" /&gt;&lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt;
          &lt;span class="button myback"&gt;back&lt;/span&gt;&lt;span class="button myforward"&gt;forward&lt;/span&gt;
                                    </code>
                </pre>
                <pre> <code>
          //js
          require('scroll-col');

          $('.demo').scrollCol();

          $('.demo-hero').scrollCol({
            mode: 'hero',
            prev: '.myback',
            next: '.myforward'
          });
                                    </code>
                </pre>
            </dd>
            <dt id="Scroll-load(滚动加载)">scroll-load</dt>
            <dd>
                <h5>描述</h5>
                <p>监听元素滚动到底部事件，返回<code>scrollLoad</code>方法，语法<code>scrollLoad(config)</code>，或使用jQuery语法格式<code>$el.scrollLoad(config)</code></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>默认<code>null</code>，要监听的元素，使用jQuery语法可省略</td>
                        </tr>
                        <tr>
                            <th>distance</th>
                            <td>默认<code>70</code>，距离底部开始加载的距离，单位px</td>
                        </tr>
                        <tr>
                            <th>callback(scrollStop)</th>
                            <td>默认无，滚动到底部回调，参数接收终止加载方法，需手动调用</td>
                        </tr>
                        <tr>
                            <th>force</th>
                            <td>默认<code>false</code>，强制执行</td>
                        </tr>
                        <tr>
                            <th>loadingTemplate</th>
                            <td>默认<code>'&lt;div class="scrollLoadSpinning"&gt;&lt;span class="_spin"&gt;&lt;/span&gt;&lt;/div&gt;'</code>，加载条html</td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <p>重复绑定或不合法配置将返回<code>null</code>。</p>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>destory</th>
                            <td>销毁监听实例</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="cont" style="width:200px;height: 200px; line-height:2;border:1px solid #ccc;overflow: auto;"&gt;&lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
            var testdata = '&lt;p&gt;test data&lt;/p&gt;',
                cont = $('.cont'),
                getData = function(length){
                    var i = 0,
                        len = length || 10,
                        r = '';
                    for(; i&lt;len; i++){
                        r += testdata;
                    }
                    return r;
                };

            cont.html(getData());
            require.async('scroll-load',function(){
                cont.scrollLoad({
                    callback:function(scrollStop){
                        setTimeout(function(){
                            cont.append(getData());
                            scrollStop();   //加载完成后执行scrollStop方法，终止加载状态
                        },1000);
                    }
                });
            });
                                    </code>
                </pre>
            </dd>
            <dt id="Scroll-row(纵向滚动)">scroll-row</dt>
            <dd>
                <h5>描述</h5>
                <p>垂直方向整行滚动。可以处理多列情况，默认添加内部按钮， 如果需要外部按钮可以指定自行添加的按钮。
                </p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>prev</th>
                            <td>指定向上箭头，默认无，将添加 '.arrs .arr_prev'</td>
                        </tr>
                        <tr>
                            <th>next</th>
                            <td>指定向下箭头，默认无，将添加 '.arrs .arr_next'</td>
                        </tr>
                        <tr>
                            <th>wrap</th>
                            <td>默认ul，指定包裹元素</td>
                        </tr>
                        <tr>
                            <th>cell</th>
                            <td>默认li，指定列表元素</td>
                        </tr>
                        <tr>
                            <th>line</th>
                            <td>滚动行数</td>
                        </tr>
                        <tr>
                            <th>duration</th>
                            <td>滚动时长，默认460，单位ms</td>
                        </tr>
                        <tr>
                            <th>animate</th>
                            <td>默认'swing'，动画曲线，来自jquery.easing</td>
                        </tr>
                        <tr>
                            <th>auto</th>
                            <td>默认true，自动滚动</td>
                        </tr>
                        <tr>
                            <th>pause</th>
                            <td>默认true，自动滚动时是否悬浮暂停</td>
                        </tr>
                        <tr>
                            <th>interval</th>
                            <td>自动播放间隔，默认5000，单位ms</td>
                        </tr>
                        <tr>
                            <th>callback</th>
                            <td>滚动回调，@param (nowRow) :当前所在页数</td>
                        </tr>
                        <tr>
                            <th>ext</th>
                            <td>扩展方法，@param (totalRow) :总页数</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;style&gt;
          .demo { position: relative; width: 320px; height: 22em; overflow: hidden; }
          .demo li{ height: 10em; overflow: hidden; margin-bottom:1em; background:yellow; }
          .demo .arrs{position: absolute; right:0; width:1.5em;height: 1.5em;background: grey;}
          .demo .arr_prev{top:0;}
          .demo .arr_next{top:2em;}
          &lt;/style&gt;
                                  </code>
                    <code>
          &lt;div class="demo"&gt;
             &lt;ul class="row"&gt;
                &lt;li class="span-4 midd-6 smal-12"&gt;&lt;img src="http://temp.im/300x300/" /&gt;&lt;/li&gt;
                &lt;li class="span-4 midd-6 smal-12"&gt;&lt;img src="http://temp.im/400x400/" /&gt;&lt;/li&gt;
                &lt;li class="span-4 midd-6 smal-12"&gt;&lt;img src="http://temp.im/500x500/" /&gt;&lt;/li&gt;
                &lt;li class="span-4 midd-6 smal-12"&gt;&lt;img src="http://temp.im/300x300/" /&gt;&lt;/li&gt;
                &lt;li class="span-4 midd-6 smal-12"&gt;&lt;img src="http://temp.im/400x400/" /&gt;&lt;/li&gt;
                &lt;li class="span-4 midd-6 smal-12"&gt;&lt;img src="http://temp.im/500x500/" /&gt;&lt;/li&gt;
                &lt;li class="span-4 midd-6 smal-12"&gt;&lt;img src="http://temp.im/300x300/" /&gt;&lt;/li&gt;
                &lt;li class="span-4 midd-6 smal-12"&gt;&lt;img src="http://temp.im/400x400/" /&gt;&lt;/li&gt;
                &lt;li class="span-4 midd-6 smal-12"&gt;&lt;img src="http://temp.im/500x500/" /&gt;&lt;/li&gt;
             &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="myprev"&gt;prev&lt;/div&gt;
          &lt;div class="mynext"&gt;next&lt;/div&gt;
                                    </code>
                </pre>
                <pre> <code>
          //js
          require('scroll-row');
          $('.demo').scrollRow({
            prev:'.myprev',
            next:'.mynext'
          })
                                    </code>
                </pre>
            </dd>
            <dt id="Select(下拉框)">select</dt>
            <dd>
                <h5>描述</h5>
                <p>下拉框插件，使用模拟的增强下拉选择器来代替浏览器原生的选择器。 选择器支持单选、多选、搜索，以及键盘快捷操作。
                </p>
                <p>返回<code>Select</code>方法，语法<code>Select(config)</code>，或使用jquery插件语法<code>$el.select(config)</code></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>data</th>
                            <td>默认无，将优先使用数据初始化select元素，数据格式见示例</td>
                        </tr>
                        <tr>
                        </tr>
                        <tr>
                            <th>posi</th>
                            <td>默认"bottom"，下拉方向，可选"top"和"auto"，"auto"会计算下拉框距离屏幕上下两端的尺寸，向空间大的一边展开。</td>
                        </tr>
                        <tr>
                            <th>hideSelected</th>
                            <td>默认false，是否隐藏已经选中的项</td>
                        </tr>
                        <tr>
                            <th>hideDisabled</th>
                            <td>默认true，是否隐藏不可用的项</td>
                        </tr>
                        <tr>
                            <th>act</th>
                            <td>默认"click"，下拉触发动作，可选 "mouseenter"</td>
                        </tr>
                        <tr>
                            <th>filterable</th>
                            <td>
                                默认false，是否支持搜索
                            </td>
                        </tr>
                        <tr>
                            <th>hook</th>
                            <td>默认''，自定义样式钩子</td>
                        </tr>
                        <tr>
                            <th>name</th>
                            <td>默认'select'，当基于非<code>select</code>标签创建实例时，指定生成的<code>select</code>标签name</td>
                        </tr>
                        <tr>
                            <th>disabled</th>
                            <td>默认false，是否禁用</td>
                        </tr>
                        <tr>
                            <th>readonly</th>
                            <td>默认false，是否只读</td>
                        </tr>
                        <tr>
                            <th>multi</th>
                            <td>默认false，是否可以多选</td>
                        </tr>
                        <tr>
                            <th>onChange(value,text)</th>
                            <td>选中回调，参数接收最新的value和text</td>
                        </tr>
                        <tr>
                            <th>format(textArray)</th>
                            <td>级联选择文字显示格式，默认<code>return textArray.join(' / ');</code></td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回对象</h5>
                <p>所返回的操作句柄包含以下方法：</p>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>update(data)</th>
                            <td>用于更新实例数据</td>
                        </tr>
                        <tr>
                            <th>disabled([flag])</th>
                            <td>禁用实例，若flag为真值将解禁</td>
                        </tr>
                        <tr>
                            <th>readonly([flag])</th>
                            <td>只读实例，若flag为真值将恢复可写</td>
                        </tr>
                        <tr>
                            <th>destroy()</th>
                            <td>销毁实例</td>
                        </tr>
                        <tr>
                            <th>clear()</th>
                            <td>清空输入</td>
                        </tr>
                        <tr>
                            <th>reset()</th>
                            <td>恢复实例为初始值</td>
                        </tr>
                        <tr>
                            <th>text([setValue])</th>
                            <td>读取/设置实例显示值</td>
                        </tr>
                        <tr>
                            <th>val([setValue])</th>
                            <td>读取/设置实例值，多选情况下赋值支持数组和字符串两种格式，字符串多个值用<code>,</code>隔开</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;style&gt;
          .demo, button{display: block; width: 200px; margin:10px;}
          &lt;/style&gt;
          &lt;form id="test" &gt;
            &lt;!-- 基于select初始化 --&gt;
            &lt;select class="demo demo-fromdom" name="select1" &gt;
              &lt;option disabled&gt;--请选择--&lt;/option&gt;
              &lt;option value="1"&gt;山东&lt;/option&gt;
              &lt;option value="2"&gt;山西&lt;/option&gt;
              &lt;option value="3"&gt;河南&lt;/option&gt;
            &lt;/select&gt;
            &lt;!-- 使用数据初始化 --&gt;
            &lt;select class="demo demo-fromdata" name="select2"&gt;
              &lt;option disabled&gt;--请选择--&lt;/option&gt;
            &lt;/select&gt;
            &lt;!-- 基于非select初始化 --&gt;
            &lt;div class="demo demo-insert"&gt; &lt;/div&gt;

            &lt;div class="demo demo-cascader"&gt; &lt;/div&gt;

            &lt;button class="btn btn-default set1" type="button"&gt;切换select1禁用状态&lt;/button&gt;
            &lt;button class="btn btn-default set2" type="button"&gt;更新select2数据&lt;/button&gt;
            &lt;button class="btn btn-default set4" type="button"&gt;设置select4的值&lt;/button&gt;
            &lt;button class="btn btn-default" type="submit"&gt;提交&lt;/button&gt;
          &lt;/form&gt;
                                    </code>
                </pre>
                <pre> <code>
            var Select = require('select');
            var dataAjax = [{
                "option": "济南",
                "value": "jinan"
            }, {
                "option": "烟台",
                "value": "yantai",
                "selected": true
            }, {
                "option": "青岛",
                "value": "qingdao"
            }];

            var select1 = $('.demo-fromdom').select({
                val: [1, 2],
                multi: true,
                onChange: function(value, text) {
                    console.log('select1值更新为', value);
                }
            });

            var select2 = $('.demo-fromdata').select({
                onChange: function(val, txt) {
                    console.log('select2选中了' + txt);
                }
            });

            var select3 = $('.demo-insert').select({
                filterable: true,
                data: dataAjax,
                onChange: function(val, txt) {
                    console.log('select3选中了' + txt);
                }
            });

            var select4 = Select({
                el:'.demo-cascader',
                data: [{
                    "option": "山东",
                    "value": "shandong",
                    "children": [{
                        "option": "济南",
                        "value": "jinan"
                    }, {
                        "option": "烟台",
                        "value": "yantai",
                        "children": [{
                            "option": '莱山',
                            "value": 'laishan'
                        }, {
                            "option": '芝罘',
                            "value": 'zhifu'
                        }, {
                            "option": '开发区',
                            "value": 'kaifaqu'
                        }, {
                            "option": '福山',
                            "value": 'fushan'
                        }, {
                            "option": '牟平',
                            "value": 'muping'
                        }]
                    }, {
                        "option": "青岛",
                        "value": "qingdao",
                        "children": [{
                            "option": '崂山',
                            "value": 'laoshan'
                        }, {
                            "option": '四方',
                            "value": 'sifang'
                        }]
                    }]
                },{
                    "option": "江苏",
                    "value": "jiangsu",
                    "children": [{
                        "option": "浙江",
                        "value": "zhejiang"
                    },{
                        "option": "杭州",
                        "value": "hangzhou"
                    },{
                        "option": "南京",
                        "value": "nanjing"
                    }]
                }],
                onChange: function(value, text) {
                    console.log(value, text);
                }
            });

            //提交测试
            $('#test').on('submit', function(e) {
                e.preventDefault();
                alert($(this).serialize());
            });
            //set1
            var disabled = false;
            $('.set1').on('click', function() {
                disabled = !disabled;
                select1.disabled(!disabled);
            });
            //set2
            $('.set2').on('click', function() {
                select2.update(dataAjax);
            });

            $('.set4').on('click', function() {
                select4.val('shandong,qingdao,sifang');
            });
                                        </code>
                </pre>
            </dd>
            <dt id="SendCode(短信验证码)">sendcode</dt>
            <dd>
                <h5>描述</h5>
                <p>封装带倒计时的短信验证码功能</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>mobile</th>
                            <td>字符型，要发送的号码，额外支持jquery选择器和函数类型，选择器用于获取input元素，函数用于返回手机号字符串</td>
                        </tr>
                        <tr>
                            <th>url</th>
                            <td>验证码请求地址</td>
                        </tr>
                        <tr>
                            <th>keyName</th>
                            <td>手机号在请求参数中的key，默认<code>"mobile"</code></td>
                        </tr>
                        <tr>
                            <th>data</th>
                            <td>请求附加数据，默认<code>{}</code></td>
                        </tr>
                        <tr>
                            <th>time</th>
                            <td>倒计时时间，默认60，单位s</td>
                        </tr>
                        <tr>
                            <th>sendBefore</th>
                            <td>发送前回调，接收三个参数：手机号，继续发送回调，终止发送回调，可用于发送前对手机号做校验</td>
                        </tr>
                        <tr>
                            <th>sendAfter</th>
                            <td>发送成功回调</td>
                        </tr>
                        <tr>
                            <th>renderTarget</th>
                            <td>默认无，倒计时渲染对象，默认当前元素</td>
                        </tr>
                        <tr>
                            <th>render</th>
                            <td>倒计时渲染方法</td>
                        </tr>
                        <tr>
                            <th>reSendText</th>
                            <td>默认"重发验证码"，重发验证码的提示文字</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;a href="###" class="btn btn-default" id="btn"&gt;sendcode&lt;/a&gt;
                                        </code>
                </pre>
                <pre> <code>
            require('sendcode');
            $('#btn').sendcode({
                mobile: '156555555',
                time: 10,
                render: function(sec) {
                  return sec + 's';
                },
                url: "http://rap.taobao.org/mockjsdata/9195/common/getYes/",
                sendBefore: function(mobile, suc, err) {
                  alert('sendBefore:mobile is ' + mobile);
                  if (mobile === '156555555') {
                    suc();
                  } else {
                    err();
                    alert('手机号验证不通过！');
                  }
                },
                sendAfter: function() {
                  alert('sendAfter callback');
                }
            });
                                        </code>
                </pre>
            </dd>
            <dt id="Slide(幻灯片)">slide</dt>
            <dd>
                <h5>描述</h5>
                <p> 幻灯片效果，支持触屏操作，支持基于数据创建，支持PC端图片按需加载(不可与响应式图片同时使用)。返回<code>Slide</code>方法，语法：<code>Slide(config)</code>，或者使用jquery插件语法：<code>$el.slide(config)</code></p>
                <h5>注意</h5>
                <ol>
                    <li>自动生成的导航(小圆点)和左右箭头默认<code>display:none</code>且不绑定事件，使用时需先在样式中显示；</li>
                    <li>默认导航是带序号的a标签，要自定义a标签内容需要指定导航容器并添加<code>custom</code>属性:<code>&lt;div class="my_navs" custom&gt; 自己写a标签... &lt;/div&gt;</code>
                    </li>
                </ol>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>默认<code>null</code>，容器元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</td>
                        </tr>
                        <tr>
                            <th>data</th>
                            <td>默认<code>null</code>，幻灯片数据，优先级高于从Dom中查找，对象数组格式：
                                <pre>
                                    <code>
[
    {
        src: '',        //图片src
        alt: '',        //图片alt
        link: '',       //图片链接
        attribute: {}   //幻灯片元素属性
    },
    ...
]
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>wrap</th>
                            <td>默认"ul"，不传<code>data</code>时用来指定包裹元素</td>
                        </tr>
                        <tr>
                            <th>cell</th>
                            <td>默认"li"，不传<code>data</code>时用来指定切换元素</td>
                        </tr>
                        <tr>
                            <th>effect</th>
                            <td>切换效果，默认‘slide’，可选slide\fade</td>
                        </tr>
                        <tr>
                            <th>direction</th>
                            <td>默认"x"，slide效果滚动方向，可选 x \ y</td>
                        </tr>
                        <tr>
                            <th>animate</th>
                            <td>默认"ease"，css3动画曲线</td>
                        </tr>
                        <tr>
                            <th>duration</th>
                            <td>默认300，切换动画时长(ms)</td>
                        </tr>
                        <tr>
                            <th>start</th>
                            <td>起始帧，默认0，即从第一张开始</td>
                        </tr>
                        <tr>
                            <th>auto</th>
                            <td>默认true，自动播放</td>
                        </tr>
                        <tr>
                            <th>pause</th>
                            <td>默认true，控制是否鼠标悬停时暂停播放，还可以传入选择器将作为暂停按钮，点击暂停，按钮将被添加'pause'类</td>
                        </tr>
                        <tr>
                            <th>interval</th>
                            <td>默认5000，自动播放间隔(ms)</td>
                        </tr>
                        <tr>
                            <th>act</th>
                            <td>默认‘click’，导航按钮触发事件 mouseenter | click</td>
                        </tr>
                        <tr>
                            <th>prevHtml</th>
                            <td>左箭头html</td>
                        </tr>
                        <tr>
                            <th>nextHtml</th>
                            <td>右箭头html</td>
                        </tr>
                        <tr>
                            <th>prev</th>
                            <td>指定左箭头，不指定将自动插入'.arrs .arr_prev'元素</td>
                        </tr>
                        <tr>
                            <th>next</th>
                            <td>指定右箭头，不指定将自动插入'.arrs .arr_next'元素</td>
                        </tr>
                        <tr>
                            <th>navs</th>
                            <td>指定自定义导航，不指定将自动添加'.slide_nav'元素或使用效果元素内已存在的".slide_nav"元素;</td>
                        </tr>
                        <tr>
                            <th>lazyload</th>
                            <td>默认<code>true</code>，使用启用图片按需加载,基于数据创建将自动处理,基于DOM创建需要手动给图片添加<code>data-src</code>属性存储图片地址</td>
                        </tr>
                        <tr>
                            <th>handletouch</th>
                            <td>默认false，是否劫持触屏事件</td>
                        </tr>
                        <tr>
                            <th>onSlide</th>
                            <td>幻灯片切换回调，@param (效果元素，切换元素，当前帧序号) </td>
                        </tr>
                        <tr>
                            <th>onReady</th>
                            <td>初始化完成回调，@param (效果元素，切换元素，总帧数)</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;style&gt;
          .demo{max-width:1000px;margin:auto;height:0; overflow:hidden; padding-bottom:40%;}
          .demo li{background: yellow;}
          .demo img{width:100%; height:100%;}
          .demo .slide_nav{display:block; left: 0;bottom:0;}
          .demo .slide_nav a{float: left;width: 16px;height: 16px;overflow:hidden;background:#ccc;margin:6px;}
          .demo .slide_nav .on{background:#666;}
          &lt;/style&gt;
                                      </code>
                    <code>
          &lt;div class="demo"&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;img src="http://static.refined-x.com/view0.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="http://static.refined-x.com/view1.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="http://static.refined-x.com/view2.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="http://static.refined-x.com/view3.jpg" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;img src="http://static.refined-x.com/view4.jpg" /&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;

                                        </code>
                </pre>
                <pre> <code>
          //js
          require('slide');
          $('.demo').slide();
                                        </code>
                </pre>
            </dd>
            <dt id="Slider(滑块)">slider</dt>
            <dd>
                <h5>描述</h5>
                <p> 滑动输入器，用于在数值区间/自定义区间内进行选择，支持连续或离散值。返回<code>Slider</code>方法，语法<code>Slider(config)</code>，或使用jquery插件语法<code>$el.slider(config)</code></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p></p>
                                <p>默认<code>null</code>，显示滑块控件的容器元素</p>
                                <p></p>
                            </td>
                        </tr>
                        <tr>
                            <th>value</th>
                            <td>
                                <p>默认<code>0</code>，传入2位数组将显示为区间选择</p>
                            </td>
                        </tr>
                        <tr>
                            <th>min</th>
                            <td>
                                <p>默认<code>0</code>，范围最小值</p>
                            </td>
                        </tr>
                        <tr>
                            <th>max</th>
                            <td>
                                <p></p>
                                <p>默认<code>100</code>，范围最大值</p>
                                <p></p>
                            </td>
                        </tr>
                        <tr>
                            <th>step</th>
                            <td>
                                <p>默认<code>1</code>，步长，取值建议能被(max - min)整除</p>
                            </td>
                        </tr>
                        <tr>
                            <th>color</th>
                            <td>
                                <p>默认<code>"primary"</code>，可选【Color】组件中的颜色</p>
                            </td>
                        </tr>
                        <tr>
                            <th>disabled</th>
                            <td>
                                <p>默认<code>false</code>，是否禁用滑块</p>
                            </td>
                        </tr>
                        <tr>
                            <th>tip</th>
                            <td>
                                <p>默认<code>true</code>，是否显示滑块当前值提示</p>
                            </td>
                        </tr>
                        <tr>
                            <th>tipRender</th>
                            <td>
                                <p>默认<code>null</code>，提示格式化方法 @param(value) : 当前值</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onChange</th>
                            <td>
                                <p>默认<code>null</code>，在松开滑动时触发，返回当前的选值，在滑动过程中不会触发， @param(value) : 变更后的值</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>value([value])</th>
                            <td>
                                <p>设置/获取示例当前值</p>
                            </td>
                        </tr>
                        <tr>
                            <th>disabled([flag])</th>
                            <td>
                                <p>禁用实例，若flag为真值将解禁</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="wrap"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="span-6 m-tb p demo"&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="btn btn-default set"&gt;赋值&lt;/div&gt;
                &lt;div class="btn btn-default get"&gt;取值&lt;/div&gt;
                &lt;div class="btn btn-default toggle"&gt;禁用/解禁&lt;/div&gt;
            &lt;/div&gt;
                                        </code>
                </pre>
                <pre> <code>
            require('slider');
            var myslider = $('.demo').slider({
                value: 50,
                onChange: function(value){
                    console.log('change to:' + value);
                }
            });
            $('.set').on('click', function(){
                myslider.value(parseInt(Math.random() * 100));
            });
            $('.get').on('click', function(){
                console.log('get:' + myslider.value());
            });
            var cur = true;
            $('.toggle').on('click', function(){
                cur = !cur;
                myslider.disabled(cur);
            });
                                        </code>
                </pre>
            </dd>
            <dt id="Spin(等待动画)">Spin</dt>
            <dd>
                <h5>描述</h5>
                <p>等待动画插件，返回<code>Spin</code>方法，语法<code>Spin(config)</code>，或使用jquery插件语法<code>$el.Spin(config)</code></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>默认<code>null</code>，等待动画的覆盖元素，不填默认为"body"</p>
                            </td>
                        </tr>
                        <tr>
                            <th>icon</th>
                            <td>
                                <p>默认<code>"&amp;#xe66e;"</code>，字体图标代码</p>
                            </td>
                        </tr>
                        <tr>
                            <th>text</th>
                            <td>
                                <p>默认<code>"Loading"</code>，提示文字</p>
                            </td>
                        </tr>
                        <tr>
                            <th>color</th>
                            <td>
                                <p>默认无，可选【Color】组件中的颜色</p>
                            </td>
                        </tr>
                        <tr>
                            <th>size</th>
                            <td>
                                <p>默认<code>"default"</code>，可选"sm" | "lg"</p>
                            </td>
                        </tr>
                        <tr>
                            <th>hook</th>
                            <td>
                                <p>默认无，可添加自定义样式名</p>
                            </td>
                        </tr>
                        <tr>
                            <th>iconRoate</th>
                            <td>
                                <p>默认<code>true</code>，图标是否旋转</p>
                            </td>
                        </tr>
                        <tr>
                            <th>timeout</th>
                            <td>
                                <p>默认<code>0</code>，自动关闭时间，单位ms</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>hide</th>
                            <td>
                                <p>关闭动画并销毁实例</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="test m-lg p-lg pr"&gt;&lt;/div&gt;
            &lt;div class="btn btn-default open"&gt;打开Spin&lt;/div&gt;
            &lt;div class="btn btn-default close"&gt;关闭Spin&lt;/div&gt;
                                        </code>
                </pre>
                <pre> <code>
            require('spin');
            var loading;
            $('.open').on('click', function(){
                loading = $('.test').spin() || loading;
            });
            $('.close').on('click', function(){
                loading &amp;&amp; loading.hide();
            });
                                        </code>
                </pre>
            </dd>
            <dt id="Store(数据存取)">Store</dt>
            <dd>
                <h5>描述</h5>
                <p>页面级异步数据存取插件，返回<code>Store</code>对象</code></p>
                <h5>方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>init([config])</th>
                            <td>
                                <p>设置默认ajax参数，默认：</p>
                                <pre>
                                    <code>
{
    type: 'get',
    url: '',
    dataType: 'json',
    data: {}
}
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>add(object)</th>
                            <td>
                                <p>添加预取数据对象，将继承默认ajax参数，格式：</p>
                                <pre>
                                    <code>
{
    key: '',        //string, 数据别名
    type: 'get',
    url: '',
    dataType: 'json',
    data: {}
}
                                    </code>
                                </pre>
                            </td>
                        </tr>
                        <tr>
                            <th>clear([keyArray])</th>
                            <td>
                                <p>传入由key数组，将某(几)项数据从队列和存储中移除，不传keyArray将清空Store中的所有队列和存储</p>
                            </td>
                        </tr>
                        <tr>
                            <th>ready([keyArray], callback)</th>
                            <td>
                                <p>确保某(几)项数据已经获取后执行回调方法，不传keyArray将获取队列所有数据</p>
                            </td>
                        </tr>
                        <tr>
                            <th>update([keyArray], [callback])</th>
                            <td>
                                <p>更新某(几)项数据，不传keyArray将更新队列所有数据，若传入callback函数，将在完成后执行</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre>
                    <code>
    &lt;div class=&quot;wrap&quot;&gt;
        &lt;button class=&quot;btn btn-default add&quot;&gt;add&lt;/button&gt;
        &lt;button class=&quot;btn btn-default ready&quot;&gt;ready(控制台查看输出)&lt;/button&gt;
        &lt;button class=&quot;btn btn-default clear&quot;&gt;clear&lt;/button&gt;
        &lt;div id=&quot;log&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
                    </code>
                </pre>
                <pre>
                    <code>
    var store = require('store');
    //初始化配置
    store.init({
        url: 'http://rapapi.org/mockjsdata/9195/tree/getNode'
    });
    
    $('.add').on('click', function(){
        var randomId = parseInt(Math.random() * 1e6);
        store.add({
            key: 'api-' + randomId,
            data: {
                hello: randomId
            }
        });
        $('#log').append('&lt;p&gt;添加 api-' + randomId+'&lt;/p&gt;');
    });
    $('.ready').on('click', function(){
        store.ready(function(states) {
            console.log('states ready: ', states);
        });
    });
    $('.clear').on('click', function(){
        store.clear();
        $('#log').empty();
    });
                    </code>
                </pre>
            </dd>
            <dt id="Switch(开关)">Switch</dt>
            <dd>
                <h5>描述</h5>
                <p>开关插件，返回<code>Switcher</code>方法，语法<code>Switcher(config)</code>，或使用jquery插件语法<code>$el.switcher(config)</code></p>
                <p><code>$('.flow-ui-switch')</code>元素将自动初始化，并且支持data-config属性</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>默认 <code>null</code>，插入开关的容器元素，必须</p>
                            </td>
                        </tr>
                        <tr>
                            <th>name</th>
                            <td>
                                <p>默认 <code>null</code>，switch实例将与页面中指定name的input值同步，若不存在该input元素将自动创建隐藏元素插入页面</p>
                            </td>
                        </tr>
                        <tr>
                            <th>value</th>
                            <td>
                                <p>默认 <code>false</code>，初始值</p>
                            </td>
                        </tr>
                        <tr>
                            <th>round</th>
                            <td>
                                <p>默认 <code>false</code>，是否开启圆角风格</p>
                            </td>
                        </tr>
                        <tr>
                            <th>color</th>
                            <td>
                                <p>默认 <code>"default"</code>，指定实例色调，支持【color】组件中所有颜色名称</p>
                            </td>
                        </tr>
                        <tr>
                            <th>disabled</th>
                            <td>
                                <p>默认 <code>false</code>，是否禁用示例</p>
                            </td>
                        </tr>
                        <tr>
                            <th>size</th>
                            <td>
                                <p>默认 <code>null</code>，指定实例尺寸，支持"sm" | "lg"</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onChange</th>
                            <td>
                                <p>开关变化时触发回调方法，@param(value) : 当前的实例状态</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>value([value])</th>
                            <td>
                                <p>设置/获取实例当前值</p>
                            </td>
                        </tr>
                        <tr>
                            <th>disabled([flag])</th>
                            <td>
                                <p>禁用实例，若flag为真值将解禁</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="wrap"&gt;
                &lt;div class="demo"&gt;&lt;/div&gt;
                &lt;div class="btn btn-default seton"&gt;开启&lt;/div&gt;
                &lt;div class="btn btn-default setoff"&gt;关闭&lt;/div&gt;
                &lt;div class="btn btn-default get"&gt;获取当前值&lt;/div&gt;
                &lt;div class="btn btn-default toggle"&gt;禁用/解禁&lt;/div&gt;
            &lt;/div&gt;
                                        </code>
                </pre>
                <pre> <code>
            require('switch');
            var myswitch = $('.demo').switcher({
                color:'primary',
                onChange: function(value){
                    console.log('switch is ',value);
                }
            });
            
            $('.seton').on('click', function(){
                myswitch.value(true);
            });   
            $('.setoff').on('click', function(){
                myswitch.value(false);
            });
            $('.get').on('click', function(){
                console.log(myswitch.value());
            });
            var cur = true;
            $('.toggle').on('click', function(){
                cur = !cur;
                myswitch.disabled(cur);
            });  
                                        </code>
                </pre>
            </dd>
            <dt id="Tab(选项卡)">tab</dt>
            <dd>
                <h5>描述</h5>
                <p>选项卡切换组件，常用于平级区域大块内容的的收纳和展现。返回<code>Tab</code>方法，语法<code>Tab(config)</code>，或使用jquery插件语法：<code>$el.tab(config)</code></p>
                <p>支持基于标签创建和基于数据创建两种模式。</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>默认<code>null</code>，生成/插入选项卡元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>conts</th>
                            <td>
                                <p>默认<code>".tab-cont"</code>；基于标签创建时，$el中指定的选项卡元素选择器，该元素的内容将作为选项卡内容；</p>
                                <p>该元素的<code>data-tab-title</code>属性值将作为选项卡标签标题，另外还支持<code>actived / disabled</code>属性，分别用于指定初始显示和禁用该选项卡</p>
                            </td>
                        </tr>
                        <tr>
                            <th>data</th>
                            <td>
                                <p>默认<code>null</code>，用于基于数据创建选项卡，优先级高于基于标签创建，对象数组格式，对象属性:</p>
                                <code>
                                    { <br>
                                    title: "", //标签标题<br>
                                    cont: "", //选选卡内容<br>
                                    actived: boolean, //可选，激活当前选项卡<br>
                                    disabled: boolean, //可选，禁用当前选项卡<br>
                                    color: string //可选，当前选项卡颜色，支持【Color】组件中的所有颜色<br>
                                    }
                                </code>
                            </td>
                        </tr>
                        <tr>
                            <th>active</th>
                            <td>
                                <p>默认<code>0</code>，默认显示的标签序号，优先级高于数据和标签中的初始值</p>
                            </td>
                        </tr>
                        <tr>
                            <th>act</th>
                            <td>
                                <p>默认<code>"click"</code>，触发事件，可选"mouseenter"</p>
                            </td>
                        </tr>
                        <tr>
                            <th>throttle</th>
                            <td>
                                <p>默认<code>300</code>，当act为"mouseenter"时的函数节流间隔，单位ms</p>
                            </td>
                        </tr>
                        <tr>
                            <th>extra</th>
                            <td>
                                <p>默认无，选项卡标题栏右侧内容，支持DOM字符串或返回DOM的函数</p>
                            </td>
                        </tr>
                        <tr>
                            <th>beforeChange</th>
                            <td>
                                <p>切换前事件，默认无。@param (index) : 当前帧序号</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onChange</th>
                            <td>
                                <p>切换回调方法，默认无。 @param (index) : 当前帧序号</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onReady</th>
                            <td>
                                <p>创建Tab实例后扩展方法，默认无。 @param ($this, opts) : 当前对象，配置</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>active([index])</th>
                            <td>
                                <p>设置/获取当前显示标签序号</p>
                            </td>
                        </tr>
                        <tr>
                            <th>disabled(index, [boolean])</th>
                            <td>
                                <p>禁用序号为index的标签，当Boolean值为<code>true</code>时将解禁</p>
                            </td>
                        </tr>
                        <tr>
                            <th>setCont(index, cont)</th>
                            <td>
                                <p>设置序号为index的标签内容</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="wrap"&gt;
                &lt;div class="tabs-1"&gt;
                    &lt;div class="tab-cont" data-tab-title="选项卡一"&gt;
                        许多年过去了，人们说陈年旧事可以被埋葬，然而我终于明白这是错的，因为往事会自行爬上来。回首前尘，我意识到在过去二十六年里，自己始终在窥视着那荒芜的小径。
                    &lt;/div&gt;
                    &lt;div class="tab-cont" actived data-tab-title="选项卡二"&gt;
                        在你心里，最能代表“春天”的是什么呢？ 是此刻窗外的猫叫。 是衬衫和短裤。 是“沾衣欲湿杏花雨，吹面不寒杨柳风”。 是家里每年春天，母亲亲手沏的那一壶新茶，温暖又缠绵。 也许是压抑不住的出行拍摄的冲动吧。
                    &lt;/div&gt;
                    &lt;div class="tab-cont" disabled data-tab-title="选项卡三"&gt;
                        一位真正的作家永远只为内心写作，只有内心才会真实地告诉他，他的自私、他的高尚是多么突出。内心让他真实地了解自己，一旦了解了自己也就了解了世界。
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;div class="m"&gt;
                    &lt;div class="btn btn-default setactive"&gt;激活2&lt;/div&gt;
                    &lt;div class="btn btn-default setdisabled"&gt;禁用/解禁3&lt;/div&gt;
                    &lt;div class="btn btn-default getactive"&gt;获取当前index&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
                    </code>
                </pre>
                <pre> <code>
            require('tab');
            var mytabs = $('.tabs-1').tab();

            $('.setactive').on('click', function(){
                mytabs.active(1);
            });

            var disabled = true;
            $('.setdisabled').on('click', function(){
                mytabs.disabled(2, disabled);
                disabled = !disabled;
            });
            $('.getactive').on('click', function(){
                console.log('actived: ' + mytabs.active());
            });
                    </code>
                </pre>
            </dd>
            <dt id="Table(数据表格)">table</dt>
            <dd>
                <h5>描述</h5>
                <p>数据表格，返回<code>Table</code>方法，语法：<code>Table(config)</code>，或使用jquery插件语法：<code>$el.table(config)</code></p>
                <p>主要用于展示大量结构化数据。支持排序、筛选、编辑等功能。</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>默认<code>null</code>，表格生成元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>data</th>
                            <td>
                                <p>用于展示的结构化数据，数组格式，默认无</p>
                            </td>
                        </tr>
                        <tr>
                            <th>load</th>
                            <td>
                                <p>ajax方式加载数据的配置：</p>
                                <code>
                                                {<br>
                                                    method: "get", //请求方式<br>
                                                    url: "", //请求url<br>
                                                    data: {} //请求参数<br>
                                                    dataParser: fn(res) //ajax返回数据处理<br>
                                                }
                                                </code>
                            </td>
                        </tr>
                        <tr>
                            <th>column</th>
                            <td>
                                <p>表格列的配置描述，详见下文</p>
                            </td>
                        </tr>
                        <tr>
                            <th>striped</th>
                            <td>
                                <p>默认<code>false</code>，是否显示间隔斑马纹</p>
                            </td>
                        </tr>
                        <tr>
                            <th>bordered</th>
                            <td>
                                <p>默认<code>false</code>，是否显示纵向边框</p>
                            </td>
                        </tr>
                        <tr>
                            <th>condensed</th>
                            <td>
                                <p>默认<code>false</code>，是否显示为紧凑表格</p>
                            </td>
                        </tr>
                        <tr>
                            <th>hover</th>
                            <td>
                                <p>默认<code>false</code>，是否显示悬浮背景</p>
                            </td>
                        </tr>
                        <tr>
                            <th>width</th>
                            <td>
                                表格宽度，单位 px，默认无，将自适应容器宽度
                            </td>
                        </tr>
                        <tr>
                            <th>height</th>
                            <td>
                                表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头
                            </td>
                        </tr>
                        <tr>
                            <th>index</th>
                            <td>
                                <p>默认<code>false</code>，是否显示索引列</p>
                            </td>
                        </tr>
                        <tr>
                            <th>multi</th>
                            <td>
                                <p>
                                    默认<code>false</code>，是否支持多选
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <th>noDataText</th>
                            <td>
                                <p>默认<code>"暂无数据"</code></p>
                            </td>
                        </tr>
                        <tr>
                            <th>noFilterText</th>
                            <td>
                                <p>默认<code>"暂无筛选结果"</code></p>
                            </td>
                        </tr>
                        <tr>
                            <th>highlight</th>
                            <td>
                                <p>默认<code>false</code>，是否支持高亮选中的行</p>
                            </td>
                        </tr>
                        <tr>
                            <th>page</th>
                            <td>
                                <p>默认<code>null</code>，传入分页配置，可对本地数据进行分页，配置：
                                    <code>
            {<br>
                el: 'JQUERY SELECTER', //指定分页显示元素，若不指定将在table.options.el之后插入分页<br>
                pageSize: 5, //每页信息条数<br>
                onChange: function(pageNumber){} //页码变更回调<br>
            }
                                                </code></p>
                            </td>
                        </tr>
                        <tr>
                            <th>onSelect</th>
                            <td>
                                <p>默认无，单选/多选结果变化回调方法。</p>
                                <p>@param(index, row, rowArray, [isSelect]) : 当前行数，当前行数据，所有选中行数据数组，是否选中(仅多选有此参数)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onReady</th>
                            <td>
                                <p>默认无，初始化完成回调方法。当使用异步数据时将接收ajax返回数据：@param(res)</p>
                            </td>
                        </tr>
                        <tr>
                            <th>onLoad</th>
                            <td>
                                <p>默认无，异步数据加载回调方法，接收ajax返回数据：@param(res)</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>column配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>title</th>
                            <td>
                                <p>列头显示文字,默认<code>"#"</code></p>
                            </td>
                        </tr>
                        <tr>
                            <th>key</th>
                            <td>
                                <p>对应列内容的字段名</p>
                            </td>
                        </tr>
                        <tr>
                            <th>render</th>
                            <td>
                                <p>自定义列元素渲染方法，@param(value, row, index, entity) : 单元格数据，行数据，行数，行操作句柄。</p>
                            </td>
                        </tr>
                        <tr>
                            <th>width</th>
                            <td>
                                <p>列宽，默认单元格均分，指定数值不得小于50</p>
                            </td>
                        </tr>
                        <tr>
                            <th>align</th>
                            <td>
                                <p>对齐方式，默认<code>"left"</code>，可选 center | right</p>
                            </td>
                        </tr>
                        <tr>
                            <th>hook</th>
                            <td>
                                <p>列的样式名称，默认无</p>
                            </td>
                        </tr>
                        <tr>
                            <th>ellipsis</th>
                            <td>
                                <p>默认<code>false</code>，开启后，文本将不换行，超出部分显示为省略号</p>
                            </td>
                        </tr>
                        <tr>
                            <th>editable</th>
                            <td>
                                <p>默认<code>false</code>，该列是否可编辑。</p>
                                <p>也可以传入一个方法，接收编辑结果相关数据 @param(rowIndex, key, value) : 原始数据行序号，列属性，新值</p>
                            </td>
                        </tr>
                        <tr>
                            <th>sort</th>
                            <td>
                                <p>默认<code>false</code>，该列是否可排序，可以设置本地排序方法和排序回调方法：</p>
                                <code>
                                                {<br>
                                                    mehtod: function(a,b,type){}, //过滤方法，type 值为 <code>"asc" 和 "desc"</code>；传入非函数类型将使用sort()排序
                                <br> handle： function(key, type){} //跳过method，接管排序按钮点击事件，可以用于ajax请求排序数据。
                                <br> }
                                </code>
                            </td>
                        </tr>
                        <tr>
                            <th>filters</th>
                            <td>
                                <p>默认无，过滤器对象数组。</p>
                                <p>过滤器对象：</p>
                                <code>
                                                {<br>
                                                    lable: "", //过滤器名称<br>
                                                    mehtod: function(value){}, //过滤方法，参数接受被过滤的值，返回 true 通过过滤<br>
                                                    handle： function(){} //跳过method，接管过滤器点击事件，可以用于ajax请求过滤数据。<br>
                                                }
                                                </code>
                            </td>
                        </tr>
                        <tr>
                            <th>validateMethod</th>
                            <td>
                                <p>验证方法，接受单元格编辑后的值，验证通过需要明确<code>return true;</code></p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>data([newData])</th>
                            <td>
                                <p>获取/设置表格数据</p>
                            </td>
                        </tr>
                        <tr>
                            <th>load(ajaxSet)</th>
                            <td>
                                <p>重新ajax获取表格数据，参数：</p>
                                <code>
                                                {<br>
                                                    method: "get", //请求方式<br>
                                                    url: "", //请求url<br>
                                                    data: {} //请求参数<br>
                                                }
                                                </code>
                            </td>
                        </tr>
                        <tr>
                            <th>column([newColumn])</th>
                            <td>
                                <p>获取/设置表格列数据</p>
                            </td>
                        </tr>
                        <tr>
                            <th>getPager</th>
                            <td>
                                <p>返回分页实例，可以获得<code>Page</code>组件的操作方法</p>
                            </td>
                        </tr>
                        <tr>
                            <th>size([config])</th>
                            <td>
                                <p>设置/获取当前表格实例的宽和高；</p>
                                <p>config对象接受"width"和"height"属性</p>
                            </td>
                        </tr>
                        <tr>
                            <th>reload</th>
                            <td>
                                <p>将表格重置为初始数据或重新加载远程数据</p>
                            </td>
                        </tr>
                        <tr>
                            <th>getRows</th>
                            <td>
                                <p>返回当前(分页)的所有行数据</p>
                            </td>
                        </tr>
                        <tr>
                            <th>getSelected([prop])</th>
                            <td>
                                <p>返回当前所选行数据，允许传入过滤属性，不传将返回完整对象数组，@param([prop]) : 过滤属性</p>
                            </td>
                        </tr>
                        <tr>
                            <th>scrollTo(index)</th>
                            <td>
                                <p>滚动到当前(分页)第index行，index从0开始计数</p>
                            </td>
                        </tr>
                        <tr>
                            <th>highlightRow(index)</th>
                            <td>
                                <p>高亮第index条数据所在行，index从0开始计数</p>
                            </td>
                        </tr>
                        <tr>
                            <th>selectAll</th>
                            <td>
                                <p>全选当前(分页)所有行</p>
                            </td>
                        </tr>
                        <tr>
                            <th>unselectAll</th>
                            <td>
                                <p>全不选当前(分页)所有行</p>
                            </td>
                        </tr>
                        <tr>
                            <th>selectRow(index)</th>
                            <td>
                                <p>选择数据第index行，index从0开始计数</p>
                            </td>
                        </tr>
                        <tr>
                            <th>unselectRow(index)</th>
                            <td>
                                <p>取消选择数据第index行，index从0开始计数</p>
                            </td>
                        </tr>
                        <tr>
                            <th>getEntity(index, key)</th>
                            <td>
                                <p>获取第index条数据所在行且属性为key的单元格操作实例</p>
                                <p>实例具有以下方法：</p>
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td>set(key, value)</td>
                                            <td>
                                                <p>设置该行数据属性为key的单元格值为value</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>toggle(key, value)</td>
                                            <td>
                                                <p>切换该行数据属性为key的单元格值为value</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>get(full)</td>
                                            <td>
                                                <p>返回当前单元格的值；若设置full为<code>true</code>，将返回该单元格所在行数据</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>edit([callback])</td>
                                            <td>
                                                <p>使当前单元格进入编辑状态，可设置回调函数 @param(row, key, value) : 当前行数据，当前编辑单元格key，编辑后的值</p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <p> </p>
                            </td>
                        </tr>
                        <tr>
                            <th>updateRow(index, row)</th>
                            <td>
                                <p>更新数据队列第index行，index从0开始计数</p>
                                <p>row可以是当前行数据对象的子集，未包含的属性将沿用原数据</p>
                            </td>
                        </tr>
                        <tr>
                            <th>appendRow(row)</th>
                            <td>
                                <p>向表格末尾追加数据行</p>
                            </td>
                        </tr>
                        <tr>
                            <th>insertRow(start, row)</th>
                            <td>
                                <p>在数据队列第start处插入row，若start超出数据总长度，将追加到最后一行，相当于<code>appendRow(row)</code></p>
                            </td>
                        </tr>
                        <tr>
                            <th>deleteRow(index)</th>
                            <td>
                                <p>删除数据队列第index条</p>
                            </td>
                        </tr>
                        <tr>
                            <th>getChanges([type])</th>
                            <td>
                                <p>返回类型为type的数据更改，type值可选"add","update","delete"；若不传type，将返回包含所有更改类型的数据</p>
                            </td>
                        </tr>
                        <tr>
                            <th>sort(key, [method])</th>
                            <td>
                                <p>将属性为key的列按照method排序，method为标准排序方法，接受a,b两个参数，若不传method将使用js默认的数据sort()方法排序</p>
                            </td>
                        </tr>
                        <tr>
                            <th>detailFormater(index, render)</th>
                            <td>
                                <p>为第index条数据所在行生成附加内容，param(index, render) : 数据所在行, 内容生成方法</p>
                            </td>
                        </tr>
                        <tr>
                            <th>detailClear(index)</th>
                            <td>
                                <p>清除第index条数据所在行的附加内容</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="mytable m pr" style="width:800px;height: 400px"&gt;&lt;/div&gt;
            &lt;div class="mypage m"&gt;&lt;/div&gt;
            &lt;div class="m"&gt;
                &lt;div class="btn btn-default updateCol"&gt;更新列&lt;/div&gt;
                &lt;div class="btn btn-default updateData"&gt;更新数据&lt;/div&gt;
                &lt;div class="btn btn-default getpager"&gt;操作page对象&lt;/div&gt;
                &lt;div class="btn btn-default resize"&gt;更改尺寸&lt;/div&gt;
                &lt;div class="btn btn-default reload"&gt;reload&lt;/div&gt;
                &lt;div class="btn btn-default getRows"&gt;获取当前页rows&lt;/div&gt;
                &lt;div class="btn btn-default getSelected"&gt;获取当前已选rows&lt;/div&gt;
                &lt;div class="btn btn-default scrollTo"&gt;滚到第2行&lt;/div&gt;
                &lt;div class="btn btn-default highlightRow"&gt;高亮第3行&lt;/div&gt;
                &lt;div class="btn btn-default selectAll"&gt;全选&lt;/div&gt;
                &lt;div class="btn btn-default unselectAll"&gt;全不选&lt;/div&gt;
                &lt;div class="btn btn-default selectRow"&gt;选中第4行&lt;/div&gt;
                &lt;div class="btn btn-default unselectRow"&gt;取消选中第4行&lt;/div&gt;
                &lt;div class="btn btn-default getEntity"&gt;单元格实体方法&lt;/div&gt;
                &lt;div class="btn btn-default updateRow"&gt;更新第一行数据&lt;/div&gt;
                &lt;div class="btn btn-default appendRow"&gt;追加数据&lt;/div&gt;
                &lt;div class="btn btn-default insertRow"&gt;再第一行后插入数据&lt;/div&gt;
                &lt;div class="btn btn-default deleteRow"&gt;删除第二行数据&lt;/div&gt;
                &lt;div class="btn btn-default getChanges"&gt;获取差异数据&lt;/div&gt;
                &lt;div class="btn btn-default sort"&gt;按"价格"排序&lt;/div&gt;
            &lt;/div&gt;
                                        </code>
                </pre>
                <pre> <code>
            var Table = require('table');
            //列配置
            var myColumn = [{
                    title:'operation',
                    render: function(value, rowData, index, entity){
                        if(rowData.storage &gt; 0){
                            return $('&lt;div class="btn btn-primary btn-sm"&gt;折扣&lt;/div&gt;').on('click', function(e){
                                e.stopPropagation();
                                entity.toggle('price', Math.round(rowData.price * 0.8));
                            });
                        }else{
                            return $('&lt;div class="btn btn-primary btn-sm disabled"&gt;无货&lt;/div&gt;');
                        }
                    },
                    width: 100,
                    fixed: true
                },{
                    title: '图片',
                    render: function(value, rowData, index){
                        var smallImg = $('&lt;img src="http://bsdn.org/projects/dorado7/deploy/sample-center/dorado/res/com/bstek/dorado/sample/data/images/'+rowData.product+'-24.png" alt="data.product" style="max-height:28px" /&gt;');
                        smallImg.tip('&lt;img src="http://bsdn.org/projects/dorado7/deploy/sample-center/dorado/res/com/bstek/dorado/sample/data/images/'+rowData.product+'-128.png" style="width:128px;" /&gt;',{
                            type: 'content'
                        });
                        return smallImg;
                    }
                },{
                    title:'产品',
                    key:'product',
                    width: 125,
                    sort: {
                        mehtod: true,
                        handle: function(key, type){
                            datagrid.load({
                                url: 'http://rapapi.org/mockjsdata/9195/mock/phone/',
                                data: {
                                    sort: type,
                                    key: key
                                },
                                dataParser: function(res){
                                    return res.data;
                                }
                            });
                        }
                    },
                    validateMethod: function(value){
                        if(value &amp;&amp; value.split &amp;&amp; value.length &lt; 10){
                            return true;
                        }
                        require.async('notice', function(Notice){
                            Notice({
                                title: '请输入长度小于10的字符串！',
                                color:'warning',
                                delay: 2000
                            });
                        });
                    },
                    editable: function(rowIndex, key, value){
                        console.log(rowIndex, key, value);
                    }
                },{
                    title:'制造商',
                    key:'manufacturer',
                    filters: [
                        {
                            label: '全部',
                            mehtod: function(value){
                                return true;
                            }
                        },
                        {
                            label: '三星',
                            mehtod: function(value){
                                return value.indexOf('Samsung')===0;
                            }
                        },
                        {
                            label: '苹果',
                            mehtod: function(value){
                                return value.indexOf('Apple')===0;
                            }
                        },
                        {
                            label: '诺基亚',
                            mehtod: function(value){
                                return value.indexOf('Nokia')===0;
                            }
                        }
                    ],
                    editable: function(rowIndex, key, value){
                        console.log(rowIndex, key, value);
                    }
                },{
                    title:'价格',
                    key:'price',
                    width: 100,
                    styler: function(value){
                        if(value&gt;3000){
                            return "background: rgb(252, 197, 197)";
                        }
                    },
                    editable: function(rowIndex, key, value){
                        console.log(rowIndex, key, value);
                    }
                },{
                    title:'库存',
                    key:'storage',
                    align: 'center',
                    sort: true,
                    styler: function(value){
                        if(value&lt;100){
                            return "background: rgb(211, 211, 211); color: red";
                        }
                    }
                },{
                    title:'类型',
                    width: 200,
                    key: 'type',
                    render: function(value, rowData, index, entity){
                        var inputArray = [{
                            type:"A",
                            name: '直板'
                        },{
                            type:"B",
                            name: '翻盖'
                        },{
                            type:"C",
                            name: '滑盖'
                        }];
                        var inputName = "phonetype"+index;
                        var typeControl = '&lt;div style="user-select: none;"&gt;';
                        $.each(inputArray, function(i, e){
                            typeControl += ('&lt;label class="radio radio-inline"&gt;&lt;input type="radio" name="'+inputName+'" value="'+e.type+'"'+(e.type===value ? ' checked' : '')+' /&gt;'+e.name+'&lt;/label&gt;');
                        });
                        typeControl += '&lt;/div&gt;';

                        return $(typeControl).on('change', function(){
                            var newValue = $(this).find('input:checked').val();
                            entity.set('type', newValue);
                        });
                    }
                },{
                    title:'体积(mm)',
                    width: 200,
                    render: function(value, rowData, index){
                        var size = rowData.size;
                        if(size){
                            return [size.length, size.width, size.height].join(' x ');
                        }
                    }
                },{
                    title:'comment',
                    key: 'comment',
                    width: 200,
                    editable: function(rowIndex, key, value){
                        console.log(rowIndex, key, value);
                    }
                }];
            //其他插件
            var Tip = require('tip');
            //调用Table
            var datagrid = Table({
                el:'.mytable',
                load: {
                    url: 'http://rapapi.org/mockjsdata/9195/mock/phone/',
                    data: {
                        id: 123
                    },
                    dataParser: function(res){
                        return res.data;
                    }
                },
                column: myColumn,
                multi: true,
                page: {
                    el: '.mypage',
                    pageSize: 5
                },
                onSelect: function(index, row, collection){
                    console.log(index, row, collection);
                }
            });
            //测试                 
            $('.updateCol').on('click',function(){
                var col = datagrid.column();
                col.splice(0,1);
                datagrid.column(col);
            });

            $('.updateData').on('click',function(){
                var tableData = datagrid.data();
                tableData.reverse();
                datagrid.data(tableData);
            });

            $('.getpager').on('click', function(){
                var pager = datagrid.getPager();
                pager.set({
                    current: 3
                });
            });
            
            $('.resize').on('click', function(){
                var thesize = datagrid.size();
                var sizeArray = [thesize.width, thesize.height].reverse();

                datagrid.size({
                    width: sizeArray[0],
                    height: sizeArray[1]
                });
            });

            $('.reload').on('click', function(){
                datagrid.reload();
            });
            
            $('.getRows').on('click', function(){
                console.log('getRows()', datagrid.getRows());
            });

            $('.getSelected').on('click', function(){
                console.log('getSelected()', datagrid.getSelected());
            });

            $('.scrollTo').on('click', function(){
                datagrid.scrollTo(2);
            });

            $('.highlightRow').on('click', function(){
                datagrid.highlightRow(3);
            });

            $('.selectAll').on('click', function(){
                datagrid.selectAll();
            });

            $('.unselectAll').on('click', function(){
                datagrid.unselectAll();
            });

            $('.selectRow').on('click', function(){
                datagrid.selectRow(3);
            });

            $('.unselectRow').on('click', function(){
                datagrid.unselectRow(3);
            });

            $('.getEntity').on('click', function(){
                var entity = datagrid.getEntity(0, 'storage');
                entity.edit(function(row, key, value){
                    console.log('entity.edit() ', row, key, value);
                });
            });

            $('.updateRow').on('click', function(){
                datagrid.updateRow(0, {
                    price: 999,
                    storage: 8888
                });
            });

            var newRow = {
                "product": "I9000",
                "manufacturer": "三星",
                "type": "A",
                size: {
                    "width": 61.4,
                    "height": 12.6,
                    "length": 120.2
                },
                "os": "Android 6.1",
                "cpu": "Samsung 2GHz",
                "screen": "5.5",
                "touchScreen": true,
                "price": 6550,
                "storage": 8,
                "comment": "弧面屏"
            };
            
            $('.appendRow').on('click', function(){
                datagrid.appendRow(newRow);
            });

            $('.insertRow').on('click', function(){
                datagrid.insertRow(1, newRow);
            });

            $('.deleteRow').on('click', function(){
                datagrid.deleteRow(1);
            });

            $('.getChanges').on('click', function(){
                console.log(datagrid.getChanges());
            });

            $('.sort').on('click', function(){
                datagrid.sort('price', function(a,b){
                    return a-b;
                });
            });
                                        </code>
                </pre>
            </dd>
            <dt id="TimePicker(时间选择器)">TimePicker</dt>
            <dd>
                <h5>描述</h5>
                <p>时间选择插件，返回<code>TimePicker</code>方法，语法：<code>TimePicker(config)</code>，或使用jquery插件语法：<code>$el.timepicker(config);</code></p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>
                                <p>默认<code>null</code>，制定触发元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)；当元素具有<code>value</code>属性时，value将自动同步所选时间</p>
                            </td>
                        </tr>
                        <tr>
                            <th>trigger</th>
                            <td>默认<code>"click"</code>，触发动作 hover | click</td>
                        </tr>
                        <tr>
                            <th>value</th>
                            <td>
                                默认当前时间，选择器初始值，配置时间必须符合<code>format</code>所设置的格式
                            </td>
                        </tr>
                        <tr>
                            <th>format</th>
                            <td>
                                默认<code>"hh:mm:ss"</code>，格式化输出
                            </td>
                        </tr>
                        <tr>
                            <th>hours</th>
                            <td>
                                默认<code>24</code>，时制，可选 12
                            </td>
                        </tr>
                        <tr>
                            <th>place</th>
                            <td>
                                默认<code>"bottom-center"</code>，选择器出现位置，选项同Tip插件
                            </td>
                        </tr>
                        <tr>
                            <th>checkClass</th>
                            <td>
                                默认<code>"text-primary"</code>，选中时间项附加样式
                            </td>
                        </tr>
                        <tr>
                            <th>confirm</th>
                            <td>
                                默认<code>false</code>，是否显示底部确认按钮
                            </td>
                        </tr>
                        <tr>
                            <th>show</th>
                            <td>
                                默认<code>false</code>，是否初始化后立即显示
                            </td>
                        </tr>
                        <tr>
                            <th>onReady</th>
                            <td>
                                默认无，插件初始化完成回调 @param(parsedTime, timeData) : 格式化后的时间字符串，时间对象
                            </td>
                        </tr>
                        <tr>
                            <th>onChange</th>
                            <td>
                                默认无，当confirm为true时的点选回调 @param(parsedTime, timeData) : 格式化后的时间字符串，时间对象
                            </td>
                        </tr>
                        <tr>
                            <th>onSelect</th>
                            <td>
                                默认无，选择时间回调 @param(parsedTime, timeData) : 格式化后的时间字符串，时间对象
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <p>同Tip插件</p>
                <h5>演示</h5>
                <pre> <code>
            &lt;div class="wrap"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="span-2"&gt;
                        &lt;div class="demo1 btn btn-default"&gt;打开时间选择器&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="span-2"&gt;
                        &lt;input type="text" class="demo2 form-control" &gt;
                    &lt;/div&gt;
                    &lt;div class="span-2"&gt;
                        &lt;div class="btn btn-default toggle2"&gt;切换demo2可用状态&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
                                        </code>
                </pre>
                <pre> <code>
            var TimePicker = require('timepicker');

            TimePicker({
                el: '.demo1',
                show: true,
                onSelect: function(time) {
                    $('.demo1').text('onchange:' + time);
                }
            });

            var picker2 = $('.demo2').timepicker({
                format: 'hh点mm分',
                value: '11点30分',
                confirm: true,
                onSelect: function(time){
                    alert('onchange:' + time);
                }
            });

            $('.toggle2').on('click',function(){
                picker2.disabled($('.demo2').prop('disabled'));
            });
                                        </code>
                </pre>
            </dd>
            <dt id="Tip(提示框)">tip</dt>
            <dd>
                <h5>描述</h5>
                <p>提示框插件，返回Tip方法，语法：<code>Tip(TipContent, config)</code>，或者使用jquery插件语法： <code>$el.tip(TipContent, config);</code></p>
                <p><code>TipContent</code>支持文本，html，jQuery元素(将清除默认样式)</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>el</th>
                            <td>默认<code>null</code>，制定触发元素，直接调用方法必填，jquery插件调用时可忽略，默认应用$(this)</td>
                        </tr>
                        <tr>
                            <th>trigger</th>
                            <td>默认<code>"hover"</code>，触发动作 hover | click | custom</td>
                        </tr>
                        <tr>
                            <th>place</th>
                            <td>默认<code>"left-center"</code>，弹出元素相对于$handle的显示位置，规则"第一轴向-第二轴向-[定位模式]"，第一轴向可选"left | right | top | bottom"，第二轴向除四个方位外还可以选择"center"，定位模式非必填，可选"in"，"in"定位模式表示$target将覆盖$handle</td>
                        </tr>
                        <tr>
                            <th>title</th>
                            <td>默认<code>false</code>，标题文字，不显示标题栏</td>
                        </tr>
                        <tr>
                            <th>hasarr</th>
                            <td>默认<code>true</code>，提示框有无箭头</td>
                        </tr>
                        <tr>
                            <th>offset</th>
                            <td>默认<code>0</code>，提示框与元素间距</td>
                        </tr>
                        <tr>
                            <th>type</th>
                            <td>默认<code>"auto"</code>，弹出文本内容自带边框，DOM元素不带边框，可选'content'，所有元素均自带边框弹出</td>
                        </tr>
                        <tr>
                            <th>modal</th>
                            <td>
                                默认<code>false</code>，是否带半透明背景
                            </td>
                        </tr>
                        <tr>
                            <th>opacity</th>
                            <td>
                                默认<code>0.5</code>，模态背景透明度
                            </td>
                        </tr>
                        <tr>
                            <th>hook</th>
                            <td>
                                默认无，字符型，class钩子，将添加到弹出元素上
                            </td>
                        </tr>
                        <tr>
                            <th>show</th>
                            <td>
                                默认<code>false</code>，立即显示，显示后只能用返回对象中的hide()方法关闭
                            </td>
                        </tr>
                        <tr>
                            <th>onshow</th>
                            <td>默认无，显示回调，接收当前对象为参数</td>
                        </tr>
                        <tr>
                            <th>onhide</th>
                            <td>默认无，关闭回调</td>
                        </tr>
                    </tbody>
                </table>
                <h5>返回方法</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>obj.hide()</th>
                            <td>关闭当前tip实例</td>
                        </tr>
                        <tr>
                            <th>obj.disabled(flag)</th>
                            <td>禁用当前tip实例，若flag为真值将解禁</td>
                        </tr>
                        <tr>
                            <th>obj.destroy()</th>
                            <td>销毁当前tip实例</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;style&gt;
          /*css*/
          .demo a{margin: 60px;}
          &lt;/style&gt;
                                         </code>
                    <code>
          &lt;!--html--&gt;
          &lt;div class="wrap demo"&gt;
            &lt;a href="#1" class="_tip1 btn btn-default"&gt;左&lt;/a&gt;
            &lt;a href="#2" class="_tip2 btn btn-default"&gt;上&lt;/a&gt;
            &lt;a href="#3" class="_tip3 btn btn-default"&gt;右&lt;/a&gt;
            &lt;a href="#4" class="_tip4 btn btn-default"&gt;下&lt;/a&gt;
          &lt;/div&gt;          
                                        </code>
                </pre>
                <pre> <code>
            //js
            var Tip = require('tip');
            
            $('.demo ._tip1').tip(Math.random);
            $('.demo ._tip2').tip(Math.random, {
                place: 'top-center'
            });

            var tip3 = $('.demo ._tip3').tip(Math.random, {
                place: 'right-center',
                show: true
            });
            setTimeout(function() {
                tip3.hide();
            }, 1000);

            var tip4 = Tip(Math.random, {
                el: $('.demo ._tip4'),
                place: 'bottom-center',
                trigger: 't4show'
            });
            setTimeout(function() {
                $('.demo ._tip4').trigger('t4show');
            }, 1000);

            setTimeout(function() {
                tip4.hide();
            }, 2000);
                                        </code>
                </pre>
            </dd>
            <dt id="Zoom(图片放大镜)">zoom</dt>
            <dd>
                <h5>描述</h5>
                <p>图片放大镜，大图尺寸自动获取。</p>
                <h5>配置</h5>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>zoomWidth</th>
                            <td>大图窗口宽度，默认与目标对象同宽</td>
                        </tr>
                        <tr>
                            <th>zoomHeight</th>
                            <td>大图窗口高度，默认与目标对象同高</td>
                        </tr>
                        <tr>
                            <th>zoomScale</th>
                            <td>默认0，大图相对小图放大倍数(大于1有效)</td>
                        </tr>
                        <tr>
                            <th>offset</th>
                            <td>大图窗口与小图距离，默认10，单位px</td>
                        </tr>
                        <tr>
                            <th>offsetTarget</th>
                            <td>大图定位目标，默认无，将相对目标元素定位</td>
                        </tr>
                        <tr>
                            <th>position</th>
                            <td>大图相对小图方位，默认right</td>
                        </tr>
                        <tr>
                            <th>animate</th>
                            <td>默认true，大图是否渐显</td>
                        </tr>
                        <tr>
                            <th>duration</th>
                            <td>默认200，大图渐显动画时长</td>
                        </tr>
                        <tr>
                            <th>preload</th>
                            <td>默认true，预加载大图，小图动态切换的情况只对第一张有效</td>
                        </tr>
                    </tbody>
                </table>
                <h5>示例</h5>
                <pre> <code>
          &lt;!--html--&gt;
          &lt;style&gt;
          .demo{width:400px;height:320px;line-height: 320px; text-align:center;background:#eee;}
          .demo img{display: inline-block;vertical-align: middle;}
          &lt;/style&gt;
          &lt;div class="demo"&gt;
             &lt;img src="http://temp.im/320x240/" zoom="http://temp.im/640x480/"  /&gt;
          &lt;/div&gt;
                                        </code>
                </pre>
                <pre> <code>
          // JS
          require('zoom');
          $('.demo').zoom()
                                        </code>
                </pre>
            </dd>
            <dt id="zTree(树)">zTree</dt>
            <dd>
                <h5>描述</h5>
                <p>树形插件，基于<a href="https://github.com/zTree/zTree_v3" target="_blank">zTree</a>优化。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。</p>
                <p>基于zTree美化皮肤，并自动添加<code>ztree</code>类，修复没有id无法拖拽的bug，及其他细节微调。</p>
                <h5>注意</h5>
                <p>依赖<code>tree.less</code>样式组件</p>
                <h5>配置</h5>
                <p>见<a href="http://www.treejs.cn/v3/api.php" target="_blank">官网文档</a></p>
                <h5>示例</h5>
                <pre> <code>
            &lt;div class="wrap"&gt;&lt;div class="tree1"&gt;&lt;/div&gt;&lt;/div&gt;
                                        </code>
                </pre>
                <pre> <code>
            require('zTree');
            var zNodes = [{
                name: "test1",
                open: true,
                children: [{
                    name: "test1_1",
                    checked: true,
                    chkDisabled: true
                }, {
                    name: "test1_2"
                }]
            }, {
                name: "test2",
                open: true,
                children: [{
                    name: "test2_1",
                    children: [{
                        name: "test2_1_1"
                    }, {
                        name: "test2_2_2"
                    }]
                }, {
                    name: "test2_2"
                }]
            }];
            $.fn.zTree.init($(".tree1"), {
                check: {
                    enable: true
                }
            }, zNodes);
                                        </code>
                </pre>
            </dd>
        </dl>
    </section>
    <section class="wrap" id="patch">
        <h2>解决方案</h2>
        <p>内置解决方案示例见<a href="https://github.com/tower1229/Flow-UI/tree/master/flow-ui" target="_blank">flow-ui/</a>。</p>
        <h3 id="f_b">前后端分离</h3>
        <p>前后端分离是系统工程，其中最基本要做到的两点，一是通过数据接口实现数据交互，二是约定交互的数据格式，使<code>view</code>层操作全部落在前端，即可从开发上实现前后端解耦</p>
        <p>框架默认提供一个<code>js/api.js</code>文件，即接口管理模块，业务代码中不再具体写死数据请求地址，而是通过该模块获取指定的api，约定前后端交互数据基本格式如下：</p>
        <pre>
            <code>
{
    "status": "Y",      //请求的状态 "Y"/"N"，也可以根据情况扩展其他
    "data": [{...}],    //请求的数据 数组或对象
    "msg": ""           //【可选】服务端提示信息
}
            </code>
        </pre>
        <p>典型用法如下：</p>
        <pre>
            <code>
//api.js
define(function(require, exports, module) {
    //开发模式
    var develop = true;
    // api管理
    var api = {
        login: develop ? '/test.login.json' : '/login'
    };

    module.exports = api;
});
            </code>
            <code>
//login.js
var api = require('js/api');
$.ajax({
    url: api.login,
    data:{
        ...
    },
    success:function(res){
        /* 后端返回
        {
            "status": "Y", 
            "data": {
                "location": "/view/login/"
            }
        } 
        */
        if(res.status==='Y'){
            if(res.data.location){
                window.location.href = res.data.location;
            }
        }
    }
})
            </code>
        </pre>
        <h3 id="CrossTerminal">响应式开发</h3>
        <p><code>css/style.css</code>已经包含对应的媒体查询，默认断点是：<code> {Pc} > 1024 > {Pad} > 640 > {Mobile} </code>，响应式网站开发除了css媒体查询以外，至少还要具备三项功能：响应式栅格系统、终端识别，响应图片。</p>
        <ol>
            <li>响应式栅格系统使页面布局可以随终端自动调整；</li>
            <li>终端识别使js可以为每个终端做单独处理，框架通过媒体查询在页面中埋下特殊标记，js通过查找标记分辨当前设备类型；</li>
            <li>响应图片使移动设备可以使用单独定制的小尺寸图片，为加载提速；</li>
        </ol>
        <p>对应方法已封装在<a href="#Responsive(响应式工具)">【responsive】</a>中。</p>
        <h3 id="mobileFixed">移动端屏幕适配</h3>
        <p>约定设计稿宽度：手机界面640px，pad界面1024px。</p>
        <p>基于以上约定，通过vw单位<strong>将html字号(rem)设置为100px</strong>(假设约定设计稿宽度640px，即<code>html{font-size:15.625vw;}</code>)，因为vw以屏幕宽度为基准，使rem也对屏幕宽度具有适应性，因此使用rem为单位的尺寸都将随屏幕宽度自动缩放，从而实现适配，例如：</p>
        <pre>
     <code>
  &lt;style&gt;
    .test{width: 3.2rem;height:3.2rem;background:yellow;}
  &lt;/style&gt;
  &lt;div class=&quot;test&quot;&gt;
    &lt;p&gt;在任何手机上都显示为宽度50%(3.2rem)的正方形&lt;/p&gt;
    &lt;p style=&quot;font-size:.28rem&quot;&gt;字号.28rem的文字&lt;/p&gt;
  &lt;/div&gt;
     </code>
   </pre>
        <h3 id="fullpage">全屏翻页</h3>
        <p>全屏翻页(fullpage)模式的简单实现，见 <a href="https://github.com/tower1229/Flow-UI/blob/master/flow-ui/fullpage.html" target="_blank">demo页面</a>。</p>
        <h3 id="instantclick">链接预加载</h3>
        <p>结合<a href="#Instantclick(链接预加载)">【instantclick】</a>插件，实现链接预加载、无刷新切换(PJAX)、加载进度条等特性，并扩展了页面切换后记住滚动位置的功能。</p>
        <h4>使用</h4>
        <p>预加载技术有一定特殊性，普通模块加载方式将失效，需要使用优化后的pjax专用模板，开发中基本保持了原有模块化开发体验，主要存在以下三点细节上的不同：</p>
        <h5>区别1：页面底部引用js时增加回调并执行返回函数(使用者无需关心)</h5>
        <pre>
          <code>
          //页面引用js的写法
          seajs.use('js/index_pjax', function(run) {
            run();
          })
          </code>
        </pre>
        <h5>区别2：在页面js的返回函数里写业务代码(使用者无需关心)</h5>
        <pre>
      <code>
  define(function(require) {
    var $ = require('jquery');
    var base = require('base');
    var com = require('./common_pjax'); //注意这里必须引用common_pjax
    //模块js的写法
    return function(){ 
      //页面代码里执行common_pjax
      com.init(); 
      //以下就是你得业务代码啦
      require('box'); 
      $.box.msg('hello p1!');

    }
  })
      </code>
    </pre>
        <h5>区别3：原来common.js里的码要写在common_pjax.js的init方法里，这里需要注意一下，common.js修改往往比较多</h5>
        <pre>
      <code>
  //common_pjax
  module.exports = {
      init:function(){
        //整站通用代码
        ...
      }
  }
              </code>
            </pre>
        <h4>其他小问题：</h4>
        <p>页面中所有的资源路径(包括图片)必须是绝对路径，因为相对路径全部是相对于着陆页而言的，当跳转路径跨层级时相对路径会报错。</p>
        <p>PJAX切换模式还会导致某些插件表现异常，本质上都是因为页面没有刷新，比如mmenu.js点击后不收回，需要添加如下配置：<code> { onClick:{ close:true}}</code></p>
        <h5>黑名单</h5>
        <p>这几种情况下的a标签不会触发预加载和pjax切换：</p>
        <ol>
            <li>具有<code>target</code>或<code>download</code>或<code>data-no-instant</code>属性；</li>
            <li>指向不同的域；</li>
            <li>指向"#"或"#"开头的地址</li>
        </ol>
        <h5>记住滚动位置</h5>
        <p>当href地址中含有<code>scrollfixed</code>参数时，切换后会记住当前的页面滚动位置：</p>
        <pre>
          <code>
      &lt;a href=&quot;/test/test.html?scrollfixed=1&quot;&gt;
          </code>
        </pre>
        <h3 id="ajaxcombo">AJAX合并</h3>
        <p>实现jQuery.ajax请求合并，详见<a href="#Base(工具包)">【base.js】</a>中<code>ajaxCombo</code>相关介绍，示例如下</p>
        <pre>
            <code>
    var base = require('base');
    //调用并附加参数:  
    base.ajaxCombo({
        extendData: {
          apikey: 'apikey',
          token: 'token',
          secretKey: 'secretKey'
        }
    });
    //第一批次合并请求
    $.ajax({
        url: 'http://host.refined-x.com/test/ajax.php',
        data: {
          test: 'hello1',
          sign: 's1'
        },
        combo: true,
        success: function(data) {
          console.log('第一批ajax1返回')
        }
    });
    $.ajax({
        type: 'post',
        url: 'http://host.refined-x.com/test/ajax.php',
        data: {
          test: 'hello2',
          sign: 's2'
        },
        combo: true,
        success: function(data) {
          console.log('第一批ajax2返回')
        }
    });
    //第二批次合并请求
    setTimeout(function() {
        $.ajax({
          url: 'http://host.refined-x.com/test/ajax.php',
          data: {
            test: 'hello3',
            sign: 's3'
          },
          combo: true,
          success: function(data) {
            console.log('第二批ajax1返回')
          }
        });
        $.ajax({
          type: 'post',
          url: 'http://host.refined-x.com/test/ajax.php',
          data: {
            test: 'hello4'
          },
          combo: true,
          success: function(data) {
            console.log('第二批ajax2返回')
          }
        });
    }, 300);
    //不参与合并的请求
    $.ajax({
        url: 'http://host.refined-x.com/test/ajax.php',
        data: {
          test: '普通未合并ajax'
        },
        success: function(data) {
          console.log(data)
        }
    });
          </code>
        </pre>
        <h3 id="ajaxCache">AJAX缓存</h3>
        <p>框架为jQuery.ajax扩展两种缓存方式，定时缓存和快照缓存。</p>
        <h4>定时缓存</h4>
        <p>定时缓存即在特定时长内缓存数据，开启定时缓存的请求，在第一次成功返回数据后将不再重复发起请求，而是直接使用缓存数据，缓存过期后将自动清除，再次请求成功后将再次缓存，开启新的缓存周期，原理类似于函数防抖。</p>
        <p>开启定时缓存需要为ajax配置<code>localCache: 36000  //ms</code>，并且使用'success'配置回调函数。</p>
        <h4>快照缓存</h4>
        <p>快照缓存即把每一次成功返回的ajax结果保存为快照，下次发起相同请求（判断依据是url和参数相同）时第一时间将快照取出返回给回调函数，待真实数据返回后校验与快照是否相同（需要数据为json格式），若相同则缓存命中，不同则再次调用回调函数并传入真实数据，为了使业务中能够区分出快照，会为快照数据添加一个'snapshoot'属性值为'true'。</p>
        <p>开启快照缓存需要为ajax配置<code>localCache:'snapshoot', dataType:'json'</code>选项，并且使用'success'配置回调函数。</p>
        <p>详见<a href="#Base(工具包)">【base.js】</a>中<code>ajaxSetup</code>，附快照缓存示例。</p>
        <pre>
            <code>
    &lt;button id=&quot;test&quot; type=&quot;button&quot;&gt;send ajax&lt;/button&gt;
    &lt;div id=&quot;log&quot;&gt;&lt;/div&gt;
            </code>
            <code>
    //js
    var base = require('base');
    base.ajaxSetup($);
    var $log = document.getElementById('log');
    $('#test').on('click', function() {
        $.ajax({
            url: "http://rapapi.org/mockjsdata/9195/common/getRandom",
            dataType:'json',
            localCache: 'snapshoot',
            success: function(res) {
                if (res.snapshoot) {
                    $log.innerText = ('快照数据:' + res.data);
                } else {
                    setTimeout(function() {
                        $log.innerText = $log.innerText + ('\n最新数据:' + res.data);
                        app.loading.hide();
                    }, 0);
                }
            }
        });
    });
            </code>
        </pre>

        <h3 id="jscatch">js模块本地缓存</h3>
        <p>使用seajs-localcache插件实现manifest功能，通过manifest.js控制各模块版本(已合并至<code>/lib/seajs.js</code>)，manifest.js中注册的模块在第一次请求后会缓存到localstorage中，修改版本号即更新对应模块缓存。</p>
        <pre>
            <code>
  /*
  * manifest.js
  */
  define('manifest',function(){
    var mod = {
        'album/album'                   : 1,  //修改版本号更新对应的插件缓存
        'hook/hook'                     : 1,
        'jquery/1/jquery'               : 1,
        'jquery/2/jquery'               : 1
        //...
        }
    //...
  })
         </code>
       </pre>
    </section>
    <footer class="wrap oh tc">
   <div class="row "> <a href="#" title="返回顶部" class="dib foot_logo gotop">
	   <figure></figure>
	</a>
	<p class="dib"> © 2016 - 3016  tower1229@gmail.com <a href="http://refined-x.com" title="雅X共赏的前端技术博客">前端路上</a><br>
	Acknowledgements : seajs \ bootstrap \ foundation \ ... </p>
	</div>
</footer>
<script type="text/javascript" async="async" src="//push.zhanzhang.baidu.com/push.js"></script>
    <script src="/Flow-UI/docs/lib/sea.js" id="seajsnode"></script>
    <script>
    seajs.use('js/doc');
    </script>

</body>

</html>
